随着發展，越來越多的電腦使用者顯示屏分辨率越來越高，但有的使用者還是使用1024px的分辨率的顯示屏（根據幾個浏覽器分辨率統計平台得到資料現在使用1200分辨率以下使用者極少，但我們CSS布局時仍然需要至少考慮1024px分辨率使用者），如果網頁布局寬度固定到1200px，1024分辨率使用者浏覽網頁時浏覽器下方會出現滾動條，為了解決這個問題，大家可以通過使用CSS3樣式判斷使用者浏覽器寬度進而調用不同布局寬度。
@media screen and (判斷屬性){ CSS樣式選擇器 }
2、CSS代碼
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
/* 設定了浏覽器寬度不大于1200px時 abc 顯示900px寬度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
/* 設定了浏覽器寬度不大于901px時 abc 顯示200px寬度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
/* 設定了浏覽器寬度不大于500px時 abc 顯示100px寬度 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無标題文檔</title>
<style>
/* 設定了浏覽器寬度不小于1201px時 abc 顯示1200px寬度 */
@media screen and (max-width: 900px) {
/* 設定了浏覽器寬度不大于900px時 abc 顯示200px寬度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5執行個體：我這個DIV寬度會随浏覽器寬度變化哦，試試改變浏覽器寬度</div>
</body>
</html>
4、為了相容IE9以下版本浏覽器需要加入一個google的JS，當然可以下載下傳引人html
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
6、效果截圖
因為設定寬度原因，不便截圖，大家可直接檢視線上案例，通過拖拽改變浏覽器寬度觀察效果。
8、完整案例代碼檔案打包下載下傳
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)