響應式布局@media screen and ( max-width: 像素值 ) {}

設計思路很簡單，首先先定義在標准瀏覽器下的固定寬度（假如標准瀏覽器的分辨率為1024px，那么我們設置寬為980px），然后用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的分辨率小於1024px的時候，則通過Media Query預設的樣式表來將頁面的寬度設置為百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的的尺寸來進行相對應的調整。同理，當瀏覽器的可視區域改變到某個值（假如為650px）的時候，頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子：

/* 當瀏覽器的可視區域小於980px */

@media screen and ( max-width: 980px ) {

#wrap {width: 90%; margin:0 auto;}

#content {width: 60%;padding: 5%;}

#sidebar {width: 30%;}

#footer {padding: 8% 5%;margin-bottom: 10px;}

}

/* 當瀏覽器的可視區域小於650px */

@media screen and ( max-width: 650px ) {

#header {height: auto;}

#searchform {position: absolute;top: 5px;right: 0;}

#content {width: auto; float: none; margin: 20px 0;}

#sidebar {width: 100%; float: none; margin: 0;}

}