關(guān)鍵要點(diǎn)

• 使用meta標(biāo)簽viewport來控制瀏覽器的“視口viewport。
• 使用元視口值 width=device-width 控制頁面適應(yīng)不同分辨率的屏幕寬度。無論是手機(jī)的小屏幕或桌面顯示器，頁面將會(huì)根據(jù)不同的屏幕尺寸重新對內(nèi)容進(jìn)行排版。
• 些瀏覽器在用戶旋轉(zhuǎn)為橫向?yàn)g覽的時(shí)候僅僅是保持頁面寬度不變并縮放網(wǎng)頁內(nèi)容而不是對屏幕內(nèi)容進(jìn)行重新排版。加入屬性initial-scale=1使頁面無論在什么情況下都將CSS像素與屏幕像素的比例保持在1:1，并允許頁面優(yōu)先采用全尺寸屏幕寬度
• 確保用戶能夠自我調(diào)節(jié)視窗大小
• 注意：使用逗號","來區(qū)分屬性，并能保證老版本瀏覽器可以合理的解析這些屬性
• 即：
• <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 確保viewport可用

  除了設(shè)置?initial-scale?以外，你也可以對視口進(jìn)行?minimum-scale,?maximum-scale?和?user-scalable?等屬性設(shè)置。當(dāng)設(shè)置完成之后，這些屬性能夠禁止用戶縮放視口，從而可能導(dǎo)致網(wǎng)站的可訪問性問題。

• 設(shè)置一個(gè)較大的絕對寬度的CSS頁面元素（如下所示）將會(huì)導(dǎo)致?div?在窄屏設(shè)備視口中顯得太寬（例如一臺CSS像素寬度為320的iPhone）這種情況下可以使用相對寬度值，例如?width: 100%。
• 同樣的，使用較大的絕對定位值可能會(huì)導(dǎo)致頁面元素落在窄屏設(shè)備的顯示范圍之外，在進(jìn)行移動(dòng)站點(diǎn)開發(fā)時(shí)一定要注意這一點(diǎn)。
• 第二種：

  用 CSS media queries （設(shè)備查詢） 來實(shí)現(xiàn)響應(yīng)式

• 關(guān)鍵要點(diǎn)

  • media queries可以根據(jù)不同設(shè)備的特性來應(yīng)用不同的樣式。
  • 盡可能使用?min-width?代替?min-device-width?來保證最寬廣的體驗(yàn)。
  • 使用相對大小數(shù)值來設(shè)定元素大小，以防打亂布局。

轉(zhuǎn)載于:https://www.cnblogs.com/shiliu123456/p/5326911.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。