隨著移動裝置的流行，網頁設計必須要考慮到移動端的設計。同乙個**為了相容pc端和移動端顯示，就需要進行響應式開發。
利用**查詢，讓同乙個**相容不同的終端（pc端、移動端）呈現不同的頁面布局。
css3@media查詢
用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸、是否可觸控、螢幕精度、橫屏豎屏等資訊。
常見屬性：
語法：
@media mediatype and|not|only (media feature)
不同的**使用不同的stylesheet
viewport
手機瀏覽器是把頁面放在乙個虛擬的"視窗"（viewport）中，通常這個虛擬的"視窗"（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。
設定viewport
乙個常用的針對移動網頁優化過的頁面的 viewport meta 標籤大致如下：
bootstrap的柵格系統
注意事項： 使用bootstrap的時候不要讓自己的名字與bootstrap的類名衝突。
常用的bootstrap自帶外掛程式
其他常用外掛程式
web前端開發之響應式布局
即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或m.彈性布局是css3引入的強大的布局方式，用來替代以前we...
web前端響應式之柵格布局
1.要做響應式最好不要寫死寬度，用 或者柵格布局 2.柵格布局的優勢在於方便，拿ant design的row col舉例，不僅可以指定不同的螢幕所佔柵格數，還能用type flex 使用flex布局，但是有弊端，雖然響應式比較容易，但是24個還是不夠精確，48？其實說白了，他就是百分比，想要更加細分...
響應式web布局
通過不同的 型別和條件定義樣式表規則，查詢讓css可以更精確作用於不同的 型別和同一 的不同條件。查詢的大部分 特性都接受min和max用於表達 大於或等於 和 小與或等於 如 width會有min width和max width 查詢可以被用在css中的 media和 import規則上，也可以被...