Media Queries怎么在CSS3中使用

這期內容當中小編將會給大家帶來有關Media Queries怎么在CSS3中使用，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

最大寬度max-width

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

CSS Code復制內容到剪貼板

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

2.  .ads {   

3.    display:none;   

4.   }   

5. }  

上面表示的是：當屏幕小于或等于480px時,頁面中的廣告區塊（.ads）都將被隱藏。

    最小寬度min-width

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

CSS Code復制內容到剪貼板

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

2. .wrapper{width: 980px;}   

3. }  

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

    多個媒體特性使用

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

CSS Code復制內容到剪貼板

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

2.   body {background-color:#f5f5f5;}   

3. }  

    設備屏幕的輸出寬度Device Width

在智能設備上，例如iPhone、iPad等，還可以根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。同樣的，對于屏幕設備同樣可以使用“min/max”對應參數，如“min-device-width”或者“max-device-width”。

CSS Code復制內容到剪貼板

1. <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />  

上面的代碼指的是“iphone.css”樣式適用于最大設備寬度為480px，比如說iPhone上的顯示，這里的“max-device-width”所指的是設備的實際分辨率，也就是指可視面積分辨率。

    not關鍵詞

CSS Code復制內容到剪貼板

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

上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小于1200px下所有設備中。

    only關鍵詞

CSS Code復制內容到剪貼板

1. <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />  

上述就是小編為大家分享的Media Queries怎么在CSS3中使用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。