流式布局和響應式布局

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

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

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

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

由此引入乙個知識點viewport

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

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

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時