前端4種常見佈局

流式佈局：就是百分比佈局，非固定像素，內容向兩側填充，理解成流動的佈局，稱爲流式佈局。 （聖盃佈局）

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

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

適配要求：

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

2. 默認顯示的縮放比例和PC端保持（縮放比例1.0）

3. 不容許用戶自行縮放網頁 （ 知足這些要求達到了適配，國際上通用的適配方案，標準的移動端適配方案。）

適配設置： 若是任何設置都沒有，默認走的就是viewport的默認設置 去設置新的viewport設置,達到適配要求。

設置視口的標籤 在head裏面而且應該緊接着編碼設置 viewport的功能：

1. width 能夠設置寬度 (device-width 當前設備的寬度)

2. height 能夠設置高度

3. initial-scale 能夠設置默認的縮放比例

4. user-scalable 能夠設置是否容許用戶自行縮放

5. maximum-scale 能夠設置最大縮放比例

6. minimum-scale 能夠設置最小縮放比例 在 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">

2.媒體查詢 使用媒體查詢能針對不一樣屏幕區間設置不一樣的佈局和樣式。

響應式容器：

　　1. 在超小屏設備的時候 768px如下 當前容器的寬度100%

　　 2. 在小屏設備的時候 768px-992px 當前容器的寬度750px

　　3. 在中屏設備的時候 992px-1200px 當前容器的寬度970px

　　4. 在大屏設備的時候 1200px以上 當前容器的寬度1170px

3.rem佈局（rem的大小是基於html元素的字體大小） 經過控制html上的字體大小去控制頁面上全部已rem爲單位的基準值控制尺寸。

3.1 把頁面上px單位轉換成rem單位

3.2 頁面製做的時候 psd 上的量取的px轉成rem使用

3.3 怎麼換算？？？預設一個基準值 方便計算 100px

3.4 適配的時候設置基準值 320px 50px 怎麼算：（640px 100px ===320px 50px）

3.5 換算公式：當前rem基準值 = 預設的基準值 / 設計稿寬度 * 當前設備的寬度

3.6 怎麼去改變 （js換算，媒體查詢推薦） 在瀏覽器端使用less

　　1.less沒法在瀏覽器端直接使用

　　2.瀏覽器不識別

　　 3.必須解析成css代碼

　　 4.經過less解析插件（javascript）

　　 5.引入less文件須要加上 type="text/less"

　　 6.less.watch(); 無刷新預覽樣式

　　 7.以http形式打開網頁預覽

 

總結：

四種佈局。

　　1.伸縮佈局 flex

　　2.流式佈局 百分比

　　3.響應佈局 媒體查詢 （超小屏設備的時候：流式佈局） 共同點：元素只能作寬度的適配（排除圖片）適配方案rem：寬度和高度都能作到適配（等比縮放）

　　4.rem佈局