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的區別是同樣的。