經常使用的CSS media Query

常見的Media Queries的具體使用方式

1、最大寬度Max Width

 

 <link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

 

上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。

2、最小寬度Min Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

上面表示的是：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。

3、多個Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query能夠結合多個媒體結構，換句話說，一個Media Query能夠包含0到多個表達式，表達式又能夠包含0到多個關鍵字， 以及一種Media Type。如上述所示屏幕在600-900px之間採用style.css樣式來渲染Web頁面。

4、設備屏幕的輸出寬度Device Width。

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

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

5、android

/*240px的寬度*/

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

 /*360px的寬度*/

 <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />

 /*480px的寬度*/

<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

咱們能夠使用media query爲android手機在不一樣分辨率提供特定樣式，這樣就能夠解決屏幕分辨率的不一樣給android手機的頁面重構問題。

6、not關鍵字

  <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not關鍵字是用來排除某種制定的媒體類型，換句話來講就是用於排除符合表達式的設備。

7、only關鍵字

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