CSS-@media詳解。
CSS3@media查詢
使用@media查詢，你可以針對不同的媒體型別定義不同的樣式。
@media可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設計響應式的頁面，@media是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
媒體型別還支援not和only關鍵字，它們可以用來更方便的定位某個媒體裝置：
not:排除某種制定的媒體型別。
@media not print and(color){}
only:指定某種特定的媒體型別，可以用來排除不支援媒體查詢的瀏覽器；
@media only screen and(color){}
@media only screen and (max-width:500px){
.gridmenu{
width:100%;
}
.gridmain{
width:100%;
}
.gridright{
width:100%;
}
}
@media的具體使用方式
1.最大寬度Max-Width:
<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css" type="text/css"></link>
上面程式碼表示：當螢幕小於600px時，將採用small.css樣式來渲染Web頁面。
2.最小寬度Min Width:
<link rel="stylesheet" media="screen and(min-width:600px)" href="large.css" type="text/css"></link>
上面程式碼表示：當螢幕大於或等於600時，將採用large.css樣式來渲染Web頁面。
3.多個media使用：
<link rel="stylesheet" media="screen and(min-width:600px) and (max-width:900px)" href="style.css" type="text/css"></link>
上面的表示的是當螢幕在600px-900px之間時採用style.css樣式來渲染web頁面。
max(min)-device-width和max(min)-width區別
max-device-width和max-width區別：
1.max-device-width是裝置整個顯示區域的寬度，例如，真實的裝置螢幕寬度。
2.max-width是目標顯示區域的寬度，例如，瀏覽器寬度。
3.如果使用max-device-width，那麼在PC瀏覽器上瀏覽網頁時，縮小或放大瀏覽器時是不執行CSS的，因為‘PC裝置’沒有變化。但如果使用max-width，縮小或放大瀏覽器時是執行CSS的，因為顯示區域即瀏覽器大小發生了變化。
4.如果使用max-device-width，那麼當手機由豎變橫時，CSS是執行的，因為顯示區域發生了變化。
5.通常，面向移動裝置使用者使用max-device-width；面向PC裝置使用者使用max-width。
看看下面的寫法：
/*移動裝置*/
@media screen and (max-device-width:480px){
/*CSS程式碼*/
}
/*PC*/
@media screen and(max-width:1024px){
/*CSS程式碼*/
}
min-device-width和min-width的區別，跟max-device-width和max-width的區別是一樣的。