1. 響應式布局
web網頁開發的頁面布局大致出現了以下幾類：
2. 響應式開發因此我們要學會針對不同的**選擇不同的開發方式，對於一些部落格、官網、新聞等**，展示內容單一簡單，適合使用響應式開發，但是針對一些功能複雜的**，則不適合。
實現響應式布局的乙個方法是使用**查詢，**查詢即針對不同的裝置使用不同的**，一般的常見裝置的尺寸劃分如下：
型別布局寬度
大螢幕大於等於1200px
預設大於等於980px
平板大於等於768px
手機到平板
小於等於767px
手機小於等於480px
**查詢建議的幾個查詢區間：
1. css語法
@media mediatype and|not|only (media feature)
重點關注screen。
media feature，即查詢的**功能，有以下取值：
重點關注device-width和max-width。
示例：
@media screen and (
max-width
:768px) }
@media screen and (
min-width
:768px) and (
max-width
:992px) }
@media screen and (
min-width
:992px) and (
max-width
:1200px) }
@media screen and (
min-width
:1200px)
}
@media screen and (
max-width
:768px) }
@media screen and (
min-width
:768px) }
@media screen and (
min-width
:992px) }
@media screen and (
min-width
:1200px)
}
向上相容即min-width為768px的樣式，在min-width為992px時依然生效，向下覆蓋即下面的樣式會覆蓋到上面的重複樣式。
書寫規則：
如果是判斷最小值（min-width），從小到大寫。
如果是判斷最大值（max-width），從大到小寫。
min-width與min-device-width的區別：
min-width是指當前可視區域的最小寬度，min-device-width是指當前裝置的最小寬度，（裝置的最小寬度不會因為你縮放瀏覽器而發生改變，因此對於採用device-width的響應式布局，在pc端縮放瀏覽器時不會發生響應式變化）
2. 通過**查詢呼叫css檔案
"stylesheet" media="screen and (min-width:992px)" href="./css/base.css" />em：長度單位，參照當前元素的字型大小，如果未設定則參照父容器的字型大小或者當前瀏覽器的預設字型大小。
rem：參照根元素(即html)的長度單位。
rem使用舉例：
@media screen and (
device-width
:320px)
}@media screen and (
device-width
:360px)
}@media screen and (
device-width
:375px)
}@media screen and (
device-width
:414px)
}div
了解響應式布局
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用 大勢...
響應式開發
現在的自由響應式的html5模板的有著高度的市場需求，因為他們完全改變了 設計與開發工業來說，是比較容易的，順手，高階語言，可以很容易地建立了很多令人驚訝的事情，很快。這些模板是易於定製，有很多不同的特點。響應式html5模板不僅是高質量的而且看起來偉大在每個裝置的顯示器，在這個時代的玩意兒片是至關...
響應式開發
1.什麼是響應式開發 顧名思義，同乙個 相容不同的大小的裝置。如pc端 移動端 平板 橫屏 豎排 的顯示風格。描述響應式介面最著名的一句話就是 content is like water 翻譯成中文便是 如果將螢幕看作容器，那麼內容就像水一樣 2.為什麼要設計響應式開發 因為市面上出現了越來越多的智...