web前端頁面適配方法

流式布局：就是百分比布局，非固定像素，內(nèi)容向兩側(cè)填充，理解成流動(dòng)的布局，稱為流式布局

視覺窗口：viewport,是移動(dòng)端特有。這是一個(gè)虛擬的區(qū)域，承載網(wǎng)頁的。

承載關(guān)系：瀏覽器---->viewport---->網(wǎng)頁

適配要求：

1. 網(wǎng)頁寬度必須和瀏覽器保持一致

2. 默認(rèn)顯示的縮放比例和PC端保持（縮放比例1.0）

3. 不允許用戶自行縮放網(wǎng)頁

滿足這些要求達(dá)到了適配，國(guó)際上通用的適配方案，標(biāo)準(zhǔn)的移動(dòng)端適配方案。

適配設(shè)置：

如果任何設(shè)置都沒有，默認(rèn)走的就是viewport的默認(rèn)設(shè)置

去設(shè)置新的viewport設(shè)置,達(dá)到適配要求。

<meta name="viewport"> 設(shè)置視口的標(biāo)簽 在head里面并且應(yīng)該緊接著編碼設(shè)置

viewport的功能：

1. width 可以設(shè)置寬度 (device-width 當(dāng)前設(shè)備的寬度)

2. height 可以設(shè)置高度

3. initial-scale 可以設(shè)置默認(rèn)的縮放比例

4. user-scalable 可以設(shè)置是否允許用戶自行縮放

5. maximum-scale 可以設(shè)置最大縮放比例

6. minimum-scale 可以設(shè)置最小縮放比例

在<meta name="viewport" content="" > content="" 使用以上參數(shù)

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

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

3. user-scalable=no 不允許用戶自行縮放 （yes，no 1,0）

標(biāo)準(zhǔn)適配方案：

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

meta:vp + tab 快捷方式