在DIV網頁布局中，當分辨率小於或等於1024px(像素)時，DIV布局對象顯示寬度為1000px，當分辨率大於1024px時，顯示寬度為1200px。利用CSS改變瀏覽器的顯示寬度實現版面網頁寬度的動態變化(網頁寬度隨著瀏覽器的顯示寬度自動變寬變窄)。
使用CSS單詞和語法
1.代碼如下:
@媒體屏幕和{CSS樣式選擇器}
請註意，要更改的CSS樣式選擇器用花括號括起來。
以不同分辨率顯示不同寬度樣式的案例
DIVCSS小案例描述:
1.我們首先設置壹個DIV框css，命名為”。abc”，將其高度設置為300px，CSS邊框設置為黑色；並設置邊距:0自動布局居中。這兩種風格都是事先設定好的，便於觀察。
2.我們手動拖動瀏覽器顯示寬度，然後觀察框寬的變化。當瀏覽器寬度調整到不超過500px時，對應的框寬會顯示為100 px；；當瀏覽器的寬度不大於901px時，方框寬度對應於"。abc”將顯示為200px當瀏覽器的寬度調整為大於1201px時，框對象的寬度顯示為1200 px；；小於1200px時，顯示寬度為900px。
3.CSS代碼:代碼如下；
。ABC { height:300 px；邊框:1px實心# 000；邊距:0 auto}？
@ media screen and(min-width:1201px){？
。abc {width: 1200px}？
}?
/* css註意:瀏覽器寬度不小於1201px時，abc顯示寬度為1200px */？
@ media screen and(max-width:1200 px){？
。abc {寬度:900px}？
}?
/*當瀏覽器寬度設置為不超過1200px時，abc將顯示900px寬度*/？
@ media screen and(max-width:901px){？
。ABC { width:200 px；}?
}?
/*當瀏覽器寬度不超過901px時，將abc的寬度設置為顯示200 px */？
@媒體屏幕和(max-width: 500px) {？
。ABC { width:100 px；}?
}?
/*當瀏覽器寬度不超過500px時，將abc顯示屏的寬度設置為100 px */？
要註意CSS的代碼順序，由大到小對CSS進行排版(判斷瀏覽器越寬越會放在前面)。這是因為邏輯關系。@media對CSS放錯的判斷會導致判斷無效。
4.HTML代碼:代碼如下:
& lt！DOCTYPE html & gt？
& lthtml & gt？
& lthead & gt？
& ltmeta charset = " utf-8 "/& gt；？
& lttitle & gt無標題文檔
& ltstyle & gt？
。ABC { height:300 px；邊框:1px實心# 000；邊距:0 auto}？
@ media screen and(min-width:1201px){？
。abc {width: 1200px}？
}?
/*當瀏覽器寬度不小於1201px時，abc顯示寬度為1200px */？
@ media screen and(max-width:1200 px){？
。abc {寬度:900px}？
}?
/*當瀏覽器寬度設置為不超過1200px時，abc將顯示900px寬度*/？
@媒體屏幕和(max-width: 900px) {？
。ABC { width:200 px；}?
}?
/*當瀏覽器寬度不超過900px時，abc顯示寬度為200px */？
@媒體屏幕和(max-width: 500px) {？
。ABC { width:100 px；}?
}?
/*當瀏覽器寬度不超過500px時，將abc顯示屏的寬度設置為100 px */？
& lt/style & gt；？
& lt/head & gt；？
& ltbody & gt？
& ltdiv class="abc " >DIVCSS5示例:我的DIV寬度會隨著瀏覽器寬度而變化。嘗試更改瀏覽器寬度
& lt/body & gt；？
& lt/html & gt；？
5.為了兼容IE9以下的瀏覽器，需要加壹個google JS，當然也可以下載吸引人的html:代碼如下；
& lt！-[if lt IE 9]& gt；？
& ltscript src = "/SVN/trunk/css3-media queries . js " & gt；& lt/script & gt；？
& lt！[endif]-& gt；？
把JS代碼放進去
6.完美兼容各大瀏覽器HTML+CSS+JS源代碼:代碼如下；
& lt！DOCTYPE html & gt？
& lthtml & gt？
& lthead & gt？
& ltmeta charset = " utf-8 "/& gt；？
& lttitle & gt無標題文檔
& ltstyle & gt？
。ABC { height:300 px；邊框:1px實心# 000；邊距:0 auto}？
@ media screen and(min-width:1201px){？
。abc {width: 1200px}？
}?
/* css註意:瀏覽器寬度不小於1201px時，abc顯示寬度為1200px */？
@ media screen and(max-width:1200 px){？
。abc {寬度:900px}？
}?
/*當瀏覽器寬度設置為不超過1200px時，abc將顯示900px寬度*/？
@媒體屏幕和(max-width: 900px) {？
。ABC { width:200 px；}?
}?
/*當瀏覽器寬度不超過900px時，abc顯示寬度為200px */？
@媒體屏幕和(max-width: 500px) {？
。ABC { width:100 px；}?
}?
/*當瀏覽器寬度不超過500px時，將abc顯示屏的寬度設置為100 px */？
& lt/style & gt；？
& lt！-[if lt IE 9]& gt；？
& lt腳本src="/svn/trunk/css3-
mediaqueries.js " & gt& lt/script & gt；？
& lt！[endif]-& gt；？
& lt/head & gt；？
& ltbody & gt？
& ltdiv class="abc " >DIVCSS5示例:我的DIV寬度會隨著瀏覽器寬度而變化。嘗試更改瀏覽器寬度
& lt/body & gt；？
& lt/html & gt；？