響應式網頁設計基礎

關鍵要點

• 使用meta標籤viewport來控制瀏覽器的「視口viewport。
• 使用元視口值 width=device-width 控制頁面適應不一樣分辨率的屏幕寬度。不管是手機的小屏幕或桌面顯示器，頁面將會根據不一樣的屏幕尺寸從新對內容進行排版。
• 些瀏覽器在用戶旋轉爲橫向瀏覽的時候僅僅是保持頁面寬度不變並縮放網頁內容而不是對屏幕內容進行從新排版。加入屬性initial-scale=1使頁面不管在什麼狀況下都將CSS像素與屏幕像素的比例保持在1:1，並容許頁面優先採用全尺寸屏幕寬度
• 確保用戶可以自我調節視窗大小
• 注意：使用逗號","來區分屬性，並能保證老版本瀏覽器能夠合理的解析這些屬性
• 即：

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

• 確保viewport可用

  除了設置 initial-scale 之外，你也能夠對視口進行 minimum-scale, maximum-scale 和 user-scalable 等屬性設置。當設置完成以後，這些屬性可以禁止用戶縮放視口，從而可能致使網站的可訪問性問題。

• 設置一個較大的絕對寬度的CSS頁面元素（以下所示）將會致使 div 在窄屏設備視口中顯得太寬（例如一臺CSS像素寬度爲320的iPhone）這種狀況下可以使用相對寬度值，例如 width: 100%。
• 一樣的，使用較大的絕對定位值可能會致使頁面元素落在窄屏設備的顯示範圍以外，在進行移動站點開發時必定要注意這一點。
• 第二種：

  用 CSS media queries （設備查詢） 來實現響應式

• 關鍵要點

  • media queries能夠根據不一樣設備的特性來應用不一樣的樣式。
  • 儘量使用 min-width 代替 min-device-width 來保證最寬廣的體驗。
  • 使用相對大小數值來設定元素大小，以防打亂佈局。