css3學習筆記（六）----Media Queries（媒體樣式） 與Responsive（響應式）

1，媒體類型：其中Screen、All和Print爲最常見的三種媒體類型。

值	設備類型
All	所有設備
Braille	盲人用點字法觸覺回饋設備
Embossed	盲文打印機
Handheld	便攜設備
Print	打印用紙或打印預覽視圖
Projection	各種投影設備
Screen	電腦顯示器
Speech	語音或音頻合成器
Tv	電視機類型設備
Tty	使用固定密度字母柵格的媒介，比如電傳打字機和終端

媒體類型引用方法：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

2，Media Queries使用：

最大寬度：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}/*當屏幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏*/

最小寬度：

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}/*當屏幕大於或等於900px時，容器“.wrapper”的寬度爲980px*/

多個媒體特性使用：

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}/*當屏幕在600px~900px之間時，body的背景色渲染爲“#f5f5f5*/

設備屏幕的輸出寬度Device-Width:下面指的是“iphone.css”樣式適用於最大設備寬度爲480px

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

not關鍵詞：排除某種媒體類型

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

only關鍵詞：指定某種媒體類型

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

3，常用實例

1024px顯屏

@media screen and (max-width : 1024px) {樣式寫在這裏}  

800px顯屏

@media screen and (max-width : 800px) { 樣式寫在這裏} 

640px顯屏

@media screen and (max-width : 640px) {樣式寫在這裏}

iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {樣式寫在這裏}

iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {樣式寫在這裏}

iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {樣式寫在這裏}