1. 程式人生 > >web前端頁面適配方法

web前端頁面適配方法

流式佈局:就是百分比佈局,非固定畫素,內容向兩側填充,理解成流動的佈局,稱為流式佈局

視覺視窗:viewport,是移動端特有。這是一個虛擬的區域,承載網頁的。

承載關係:瀏覽器---->viewport---->網頁

適配要求:

1. 網頁寬度必須和瀏覽器保持一致

2. 預設顯示的縮放比例和PC端保持(縮放比例1.0)

3. 不允許使用者自行縮放網頁

滿足這些要求達到了適配,國際上通用的適配方案,標準的移動端適配方案。

適配設定:

如果任何設定都沒有,預設走的就是viewport的預設設定

去設定新的viewport設定,達到適配要求。

<meta name="viewport"> 設定視口的標籤 在head裡面並且應該緊接著編碼設定

viewport的功能:

1. width 可以設定寬度 (device-width 當前裝置的寬度)

2. height 可以設定高度

3. initial-scale 可以設定預設的縮放比例

4. user-scalable 可以設定是否允許使用者自行縮放

5. maximum-scale 可以設定最大縮放比例

6. minimum-scale 可以設定最小縮放比例

在<meta name="viewport" content="" > content="" 使用以上引數

1. width=device-width 寬度一致比例是1.0

2. initial-scale=1.0 寬度一致比例是1.0

3. user-scalable=no 不允許使用者自行縮放 (yes,no 1,0)

標準適配方案:

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

meta:vp + tab 快捷方式