詳解CSS3中Media Queries的相關使用

 　　Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果

　　@media 媒體類型and (媒體特性){你的樣式}

　　最大寬度max-width

　　“max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：

　　CSS Code複製內容到剪貼簿

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

　　.ads {

　　display:none;

　　}

　　}

　　上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊(.ads)都將被隱藏。

　　最小寬度min-width

　　“min-width”與“max-width”相反，指的是媒體類型大於或等於指定寬度時，樣式生效。

　　CSS Code複製內容到剪貼簿

　　@media screen and (min-width:900px){

　　.wrapper{width: 980px;}

　　}

　　上面表示的是：當螢幕大於或等於900px時，容器“.wrapper”的寬度為980px。

　　多個媒體特性使用

　　當螢幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”，如下所示。

　　CSS Code複製內容到剪貼簿

　　@media screen and (min-width:600px) and (max-width:900px){

　　body {background-color:#f5f5f5;}

　　}

　　裝置螢幕的輸出寬度Device Width

　　在智慧型裝置上，例如iPhone、iPad等，還可以根據螢幕裝置的尺寸來設定相應的樣式(或者調用相應的樣式檔案)。同樣的，對於螢幕裝置同樣可以使用“min/max”對應參數，如“min-device-width”或者“max-device-width”。

　　CSS Code複製內容到剪貼簿

　　

　　上面的代碼指的是“iphone.css”樣式適用於最大裝置寬度為480px，比如說iPhone上的顯示，這裡的“max-device-width”所指的是裝置的實際解析度，也就是指可視面積解析度。

　　not關鍵詞

　　CSS Code複製內容到剪貼簿

　　@media not print and (max-width: 1200px){樣式代碼}

　　上面代碼錶示的是：樣式代碼將被使用在除列印裝置和裝置寬度小於1200px下所有裝置中。

　　only關鍵詞

　　CSS Code複製內容到剪貼簿