移動端是怎麼做適配的？

移動端

所謂移動端，就是指移動裝置的頁面，與之相對的稱為桌面端頁面，也稱為pc端頁面

適配

適配是一種自適應方案，用來解決由於終端眾多導致的頁面尺寸問題

1、用meta標籤

在head標籤中新增meta標籤，**如下

name="viewport"       //命名該meta標籤

width=device-width //寬度等於裝置寬度
user-scalable=no //使用者不可以伸縮頁面
initial-scale=1.0 //初始比例1.0
maximum-scale=1.0 //最大比例1.0
minimum-scale=1.0 //最小比例1.0

2、**查詢

這裡引用mdn的一段話來解釋何為**查詢

**查詢由乙個可選的**型別和零個或多個使用**功能的限制了樣式表範圍的表示式組成，例如寬度、高度和顏色。

**查詢，新增自css3，允許內容的呈現針對乙個特定範圍的輸出裝置而進行裁剪，而不必改變內容本身。

max-width可以理解成頁面最大寬度可以為800px，當寬度超過800px時，最大寬度肯定超過800px，故當前頁面小於800px為ture，若超過800px則為false

')

//設定html的font-size為顯示區寬度的0.1倍

要注意的一點是，若顯示區寬度過小，使得轉換後html的font-size小於12px的話，會在google chrome瀏覽器報錯，可以在轉換前新增乙個條件判斷，使當前font-size若小於12px便等於12px。

拓展：

移動端適配是怎麼做的？

一 使用 meta viewport 在head標籤內部加入以下 改 的作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放 width device width 讓當前viewport的寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial sc...

移動端是怎麼做適配的？

width device width 讓當前視口寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial scale 1.0 設定頁面的初始縮放值為1.0 maximum scale 1.0 允許使用者的最大縮放值為1.0 minimum scale 1.0 允許使用者的...

HTML 移動端是怎麼做適配的？

一 meta viewport 在head標籤內部加上這段 該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。width device width 讓當前viewport寬度等於裝置的寬度 user scalable no 禁止使用者縮放 initial s...