我們只需用到width衍生出的max-width這個屬性，定義輸出裝置中的頁面可見區域寬度來控制該改變的樣式即可。
html**如下：
頭部
左部中部
右部 底部
body
.header
.container
.clearfix:after
.footer
.left
.center
.right
body
.header
.container
.clearfix:after
.footer
.left
.center
.right
body
.header
.container
.clearfix:after
.footer
.left
.center
.right
視窗大於1024px時顯示的樣子
當大於640小於980時，右側欄在底部
當小於480時，導航欄摺疊，body三部分豎直排列顯示，若視窗持續縮小，不在發生變化，區域被壓縮
效果總圖：
CSS（4） 媒介查詢，響應式布局, 彈性盒子布局
列印和螢幕顯示不同的字型和字型大小。media screen media print media screen,print 螢幕大於600px小於900px的視窗應該應用的樣式 media screen and min width 600px and max width 900px 判斷螢幕方向or...
CSS 偽元素 媒介查詢篇
偽元素與偽類選擇器沒有關係 偽元素區別於普通的html元素,其是沒有對應的標籤的 適用場景 a.如果僅僅是裝飾效果,並且沒有乙個比較好的語義化標籤來實現這個效果 可以考慮偽元素實現 b.如果我們書寫標籤的原因不是為了展示該標籤,而僅僅是為了解決其他元 素造成的問題.可以考慮使用偽元素實現 例如清除浮...
響應式布局2之Media Query（媒介查詢）
1.使用 media 查詢可以針對不同的 型別定義不同的樣式。2.media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面。3.當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。media mediatype and not only media ...