CSS3引入了一個新概念，Media Queries,中文直譯為“媒體查詢”，能夠允許基于各種瀏覽設備的網站建設而無需改變實際內容本身，毋庸置疑的，在這個網站建設需要適應各種屏幕、各種PC、平板、手機等的時代，Media Queries將徹底的改變我們網頁設計的方式。

     簡單點來說，就是Media Queries允許我們在不同的設備上輕松地展示及瀏覽我們的網站，這將是移動互聯網端網站建設的一個里程碑，并且為我們帶來了響應式網頁設計。Media Queries通過將簡化移動設備集成到我們的網站建設上，將對我們的網頁設計工作產生深遠的影響。

設置媒體查詢

      媒體查詢工作，通過指定特定的條件和應用特定的樣式給他們。讓我們在一些不同類型的查詢，這將是為您解釋這些疑問的最有用的方式。

最大寬度

下面的CSS只適用于大小比為300px的可視面積設計。

@media screen and (max-width: 300px){
   p {color: #262626}
}

最小寬度

下面的CSS規則將適用可視面積尺寸大于600px的設計。

@media screen and (min-width: 600px){
   p {color: #f2f2f2}
}

兩者結合

最常見也是最有效的最小&最大寬度查詢，因為它提供了更多的精度。下面的CSS代碼將適用于可視面積為300px和600px之間的設計。

@media screen and (min-width: 300px) and (max-width:600px) {
   p {color: #000 }
}

實際上，如果你想要定制特定的設備，你可以將這一對查詢設計放在一起。

設備寬度

設備的寬度從常規最小和最大寬度的查詢不同，因為它實際上是指一個給定的設備的分辨率。因此，下面的查詢將只適用于CSS分辨率為960px的顯示器 - 相當于一個iPhone 4的顯示屏大小。

@media screen and (max-device-width: 960px) {
   p {color: #444 }
}

視網膜：像素比和分辨率

視網膜顯示器的工作方式是它的2倍包的像素數在相同的空間量超過標準清晰度顯示器。如果你想針對視網膜顯示器改變了背景圖片為視網膜準備的人，你應該使用下面的查詢，它可以確保在CSS將只能工作在像素比至少為2，并與192dpi的最小分辨率。

@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
   p {color: #333}
}

風景與肖像

此查詢僅適用于某些設備，如解鎖iPhone和iPad，因為它是不支持所有的設備的。但你可以當一個設備是縱向或橫向像下面的例子指定CSS規則。

@media screen and (orientation: portrait) {
   p {color: #333}
}

@media screen and (orientation: landscape) {
   p {color: #333}
}

調用媒體查詢的另外一種方法

正如你在上面的例子中，我們看到了隨時撥打媒體查詢作為當前樣式表的一部分。這是完全正常，但這樣做有兩種方式，其實。首先是在您當前的CSS文件中指定的媒體查詢作為這樣的：

@media screen and (max-width: 300px){
   p {color: #262626}
}

但是，如果你有規則的整體樣式表你想成為適用于特定的設備或查詢，您可以添加一個媒體查詢，當您將您的HTML頭中的樣式表如下：

<link rel="stylesheet" media="screen and max-width: 300px)" href="small-devices.css" />

如果你想調整只是幾件事情來調整不同的設備或顯示，而第二個是更有益的，當你重新創建你的網站，你有一大堆的事情要在不同的設備或顯示第一種方式是有幫助的。

后記

      現在你知道多一點有關媒體查詢可以得到多一點的技術。Media Queries由兩個部分組成，他們分別是media type 和 second is zero ，或者更多你所喜歡的Queries表達方式？