即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫**的布局來布置；
對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或m.。
彈性布局是css3引入的強大的布局方式，用來替代以前web開發人員使用的一些複雜而易錯hacks方法（如使用float進行類似流式布局）。
其中flex-flow是flex-direction和flex-wrap屬性的簡寫方式，語法如下：
flex-flow: ||
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-reverse
flex-direction定義了彈性專案在彈性容器中的放置方向，預設是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
flex-wrap定義是否需要拆行以使得彈性專案能被容器包含。*-reverse代表相反的方向。
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式，下面的例子很直觀的說明了各個屬性值的區別：
自適應布局（adaptive）的特點是分別為不同的螢幕解析度定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨視窗大小的調整發生變化。你可以把自適應布局看作是靜態布局的乙個系列。
就是說你看到的頁面，裡面元素的位置會變化而大小不會變化；
流式布局（liquid）的特點（也叫」fluid」) 是頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。 你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
做手機**必加的一句頭部(head)**
scalable=no">
name="viewport"
名稱=檢視
width=device-width 頁面寬度=裝置寬度(可以理解為獲取你手機的螢幕寬度)
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放
分別為不同的螢幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著視窗調整而自動適配。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
每個螢幕解析度下面會有乙個布局樣式，同時位置會變而且大小也會變。
當建立乙個響應式**，或者非響應式**變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去新增**查詢（media query)和響應式**。這種操作更容易實現響應式特性。當你完成當你已經完成了無響應的**，做的第一件事是在你的 html 頁面，貼上下面的**到和標籤之間。這將設定螢幕按1：1的尺寸顯示，在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽，並禁止使用者縮放頁面。
content="true">
user-scalable屬性能夠解決ipad切換橫屏之後觸控才能回到具體尺寸的問題。media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如乙個終端的解析度小於980px，那麼可以這樣寫}@media screen and (max-width:980px)#content
#footer
這裡面的樣式會覆蓋掉之前所定義的樣式。
假如我們要相容ipad和iphone檢視，我們可以這樣設定：
/**ipad**/@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}
到目前為止，開發人員用到的字型單位大部分都是畫素，雖然畫素在普通**上是ok的，但是我們仍然需要響應式字型。乙個響應式的字型應關聯它的父容器的寬度，這樣才能適應客戶端螢幕。css3引入了新的單位叫做rem,和em類似但對於html元素，rem更方便使用。rem是相對於根元素的，不要忘記重置根元素字型大小：
1.寬度不固定，可以使用百分比html完成後，你可以定義響應式字型：
@media (min-width:640px)}
@media (min-width:960px)}
@media (min-width:1200px)}
不理解rem的童鞋，在這裡給大家推薦一篇寫的不錯的部落格(
2.處理#head#content
在這裡我給大家一把鑰匙,有人會說，博主，能不能別裝逼？處理還有啥鑰匙，你以為是開門啊，博主，醒醒吧
哎喲 ，我這暴脾氣，我說的鑰匙不是真的鑰匙，而是指處理的萬能方法，是什麼呢？就是液態化。接著 會有人問：「什麼是液態化」呢？這個問題問的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無形 能適合很多容器，那麼假如我們把當做水 是不是就可以實現自適應問題了呢？
在html頁面中的，比如文章裡插入的我們都可以通過css樣式max-width來進行控制的最大寬度，如：
除了img標籤的外我們經常會遇到背景，比如logo為背景：#wrap img如此設定後id為wrap內的會根據wrap的寬度改變已達到等寬擴充，height為auto的設定是為了保證原始的高寬比例，以至於不會失真。
最後我們來總結下響應式布局的實現原理#log abackground-size是css3的新屬性，用於設定背景的大小，有兩個可選值，第乙個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定乙個值，那麼另乙個值預設為auto。
background-size:cover; 等比擴充套件來填滿元素
background-size:contain; 等比縮小來適應元素的尺寸
首先我們應該遵循移動端優先，互動和設計以移動端為主，pc則作為移動端的擴充套件，乙個頁面需要相容不同終端，那麼有兩個關鍵點是我們需要去做到響應式的：響應式布局和響應式內容（、多**）
1.響應式布局
1.meta標籤定義
2.使用media queries適配對應樣式
2.響應式內容
1.響應式
web前端開發之幾種布局方式之響應式布局
即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或m.彈性布局是css3引入的強大的布局方式，用來替代以前we...
web前端 響應式布局
隨著移動裝置的流行，網頁設計必須要考慮到移動端的設計。同乙個 為了相容pc端和移動端顯示，就需要進行響應式開發。利用 查詢，讓同乙個 相容不同的終端 pc端 移動端 呈現不同的頁面布局。css3 media查詢 用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸 是否可觸控 螢幕精度 橫屏豎...
web前端響應式之柵格布局
1.要做響應式最好不要寫死寬度，用 或者柵格布局 2.柵格布局的優勢在於方便，拿ant design的row col舉例，不僅可以指定不同的螢幕所佔柵格數，還能用type flex 使用flex布局，但是有弊端，雖然響應式比較容易，但是24個還是不夠精確，48？其實說白了，他就是百分比，想要更加細分...