響應式設計 RWD

重要度:⭐⭐⭐⭐難度:⭐⭐

響應式設計(Responsive Web Design，RWD) 即是透過偵測使用者的瀏覽器頁面大小，自動調整往佈局。

為甚麼會用瀏覽器頁面大小一詞呢，即使在大型載具(電腦或大型教學觸控屏幕)，也可能會因為需同時使用多個視窗而壓縮畫面空間，此時畫面佈局若可以隨之變化，可以避免瀏覽時的需使用到滾動條，增進使用者體驗。

RWD 設計在現在移動端數量大幅增加的情況下，成了網頁設計幾乎必備的選項。

請試想著你拿起手機打開網頁，卻發現網頁字體小的眼睛快看不見、網頁寬度超過手機寬度、按鍵擠在一起甚至無法顯示。

RWD 設計能改善這種狀況，且在不大幅更改CSS代碼的情況下，為移動端的使用者打造更好的體驗。

簡單的 RWD 你可以透過設置 viewport 來實現。

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶可以通過平移和縮放來看網頁的不同部分。 —菜鳥教程

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta標籤的內容通常不會在直接在畫面上顯示，通常用來指定網頁的關鍵字、頁面概述或預設頁面大小等屬性。

• width=device-width 設定頁面寬度，此處設定為載具螢幕大小。

• initial-scale=1.0 設定縮放比例，此處設定為1.0即不變。

無 viewport(左) 與 有加 viewport(右)

大部分的RWD可透過多媒體查詢語法實現。

@media not|only mediatype and (expressions) { CSS 代码...; }

點擊 或 程式碼欄位展開後便會壓縮顯示區域至500px以下，即可看見背景顏色變化。

如果您的最大畫面小於或等於500px則請點擊 1x倍率下和0.5x倍率的變化。

請按下 [F12] 並按下 Ctrl + Shift + M 或是點擊 。

您將進入適應性設計模式，此時你會發現畫面變為移動端。

你可以透過選取不同設備來測試網頁對每個載具的適應性，也可以自行調整。