關鍵要點

• 使用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?來保證最寬廣的體驗。
  • 使用相對大小數值來設定元素大小，以防打亂布局。

轉載于:https://www.cnblogs.com/shiliu123456/p/5326911.html

總結

以上是生活随笔為你收集整理的响应式网页设计基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。