固定寬度布局：為網頁設定乙個固定的寬度，通常以px作為長度單位，一般pc端網頁
流式布局：為網頁設定乙個相對的寬度，通常以百分比作為長度單位
柵格化布局：將網頁寬度人為的劃分為均等的長度，然後排版布局時則以這些均等的長度做為度量單位，通常利用百分比作為長度單位來劃分成均等的長度
響應式布局：通常檢測裝置資訊，決定網頁布局方式，即使用者如果採用不同的裝置訪問乙個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。
一般開發過程中往往是相互結合使用
在移動互聯日益成熟的時候，在桌面瀏覽器上開發的網頁已經不能滿足移動端裝置的展示和閱讀
通常做法是對移動端單獨開發一套特定的版本，但是如果移動端裝置越來越多的時候就會因為需要適配所有螢幕而造成開發成本增大，並且維護成本也變大
設定不同螢幕寬度下的樣式
查詢媒介：查詢到當前螢幕的寬度，針對不同螢幕寬度設定不同的樣式來適應不同螢幕，當重置瀏覽器大小的過程中，頁面也會根據相應的瀏覽器寬度個高度重新渲染頁面
實現方式：通過查詢screen的寬度來指定某個寬度區間的網頁布局
/*and 連線條件，內容是符合條件時渲染的樣式*/
@media screen and (
min-width
: 992px) and (
max-width
: 1200px)
}
如果是判斷最小值，那麼就應該從小到大寫–bookstrap就是判斷最小值，
如果是判斷最大值，那麼就應該是從大到小寫
min-width：在pc端和移動端都能正常響應，效果一致，它是指當前可視區域的寬度
min-device-width: 在移動端可以實現，但在pc端時不會響應
響應式開發移動端入門必備知識
採用flex布局的元素，它的所有子元素自動成為容器成員，可以自動分配空間，適合做移動端開發 在不同的裝置上顯示不同的效果，因此適合做移動端開發 物理畫素值 螢幕解析度 裝置獨立畫素 當前瀏覽器的寬高 裝置畫素比 裝置畫素比 物理畫素 裝置獨立畫素 每英吋的畫素值 指裝置的螢幕上能用來顯示網頁的區域 ...
響應式開發
現在的自由響應式的html5模板的有著高度的市場需求，因為他們完全改變了 設計與開發工業來說，是比較容易的，順手，高階語言，可以很容易地建立了很多令人驚訝的事情，很快。這些模板是易於定製，有很多不同的特點。響應式html5模板不僅是高質量的而且看起來偉大在每個裝置的顯示器，在這個時代的玩意兒片是至關...
響應式開發
1.什麼是響應式開發 顧名思義，同乙個 相容不同的大小的裝置。如pc端 移動端 平板 橫屏 豎排 的顯示風格。描述響應式介面最著名的一句話就是 content is like water 翻譯成中文便是 如果將螢幕看作容器，那麼內容就像水一樣 2.為什麼要設計響應式開發 因為市面上出現了越來越多的智...