流式佈局與響應式佈局

常見的面試題會讓你聊一聊流式佈局與響應式佈局，我還沒遇到過直接問他倆區別的面試官，都是根據我的項目（裏面有用到流式佈局＋響應式佈局）。

圍繞這兩點感覺網上大部分博客都長得差不多，那我就用自己粗淺的理解說一下由此展開的一點問題吧。

說起流式佈局首先就要提到的是老掉牙的固定佈局：瀏覽器大小不影響內部元素大小。

這不就是各大銀行和國企的PO網站嘛 = = 無論屏幕多大網頁都顯示相同寬度。

在知乎上看到：在移動端開發中其實也可以採用固定佈局（有兩種方法） 點擊打開鏈接

由此引入一個知識點viewport

用於移動端，用來設置頁面的大小和縮放比例，沒有爲手機設計的網站，通常會使用桌面的寬度來渲染（通常是960px，980px），然後再改變字體的大小和對內容的縮放來使內容適應屏幕。然後你就要使勁拖拽頁面 so bad

但如果設置一個簡單的meta標籤就可以解決這個煩人的問題：

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

width=device-width：寬度等於當前設備寬（但會導致iphone、ipad橫豎屏不分）

initial-scale=1.0：初始縮放值爲1（會導致IE橫豎屏不分）

這兩條是爲了互補，所以總是同時出現。

user-scalable=no：不允許客戶手動縮放（不必須）

所以纔會有這兩種解決辦法：

①在viewport meta標籤上設置width=320（因爲腎5的width是320），頁面的各個元素也採用px作爲單位。通過用JS動態修改標籤的initial-scale使得頁面等比縮放，從而剛好佔滿整個屏幕。

②設在viewport meta標籤上設置content"width=640（手機寬度都是小於640的）,user-scalable=no，頁面的各個元素也採用px作爲單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。

接下來聊一聊流體佈局

一個頁面原本

如果我們拽瀏覽器減小窗口寬度，固體佈局時會是這種效果

但流體佈局，看出來有很大的不同了。

元素寬度並不是固定的，而是按照分辨率寬度進行調整，但是整體佈局沒有發生改變。

固定寬度佈局使用的是像素，但是流體佈局寬度使用的是百分比，但由於高度和文字大小神馬還是使用的px所以會造成一旦兩個分辨率差的有點大效果就差強人意。畢竟裏面的文字是不會隨着你窗口的減小跟着變小的（不然你讓移動端用戶眼要瞎死嘛）。這也是早期屏幕分辨率相差不大時最愛用的（有人能告知一下那是啥時代嗎？）

插一波彈性佈局：包裹文字的元素的尺寸採用em、rem做單位，而頁面的劃分區域還是百分數或px做單位。

在此處回顧下em和rem的區別：em是根據自己的font-size×em尺寸得到最終的像素值；rem指的根em，他統一隨着html的font-size而不是元素本身的font-size，搭配媒體查詢或js，動態改變html的font-size即可改變所有（而且咱們計算起來很容易）。

在此提到的媒體查詢可以引出我們今天的重頭：響應式佈局

CSS3中的媒體查詢，可以在不同分辨率下對元素重新設置樣式（不只是尺寸），在不同屏幕下可以顯示不同版式。

@media screen and (min-width:480px) 手機

@media screen and (min-width:768px) 平板

@media screen and (min-width:992px) 桌面顯示器

@media screen and (min-width: 1200px){ 選擇器{ 屬性：值; } }  大於1200px時

這四個值是常用的，注意先後順序，小的在前大的在後。