自適應設計簡介

自適應設計(Responsive Design)是指網頁會自動按照瀏覽器的顯示尺寸自動調較至最合適的顯示設定的網頁設計方式。例如同一個網頁在桌面電腦及手機上顯示,便完全不同。如果仍然使用單一設計來顯示,則通常在手機上會有大量內容溢出,或是經常要「拉來拉去」才能看到內容,用戶會覺得很不方便。

自適應設計主要是靠以下方法實現:

  1. 以百分比設定內容的闊度和高度,例如:%、vw、vh等單位;
  2. 以Media Query檢測瀏覽器的大小,並設定多套顯示方案。

如何在本系統中使用自適應設計?

具體做法是:

  1. 設計「自適應MasterPage」;
  2. 設計「自適應首頁」;
  3. 選擇自適應MasterPage及自適應首頁,並套用出來。

有哪些網站可以學習網頁設計?

這是個資訊很豐富的網站:

https://www.w3schools.com/

Powered by Friendly Portal System v10.32