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

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

設置媒體查詢

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

最大寬度

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

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

最小寬度

下面的CSS規(guī)則將適用可視面積尺寸大于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 }
}

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

設備寬度

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

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

視網(wǎng)膜：像素比和分辨率

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

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

風景與肖像

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

@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}
}

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

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

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

后記

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

2014/3/5 三招快速樹立企業(yè)的網(wǎng)絡品牌

2014/3/4 微信公眾平臺、微信商城與騰訊風鈴的異同

2014/3/3 18個小技巧教你識別低質量網(wǎng)站

2014/3/1 黑色的回歸:令人驚嘆的黑色網(wǎng)站設計

2014/2/28 網(wǎng)站區(qū)域性優(yōu)化與廣泛性優(yōu)化哪個效果好

2014/2/27 網(wǎng)站運營：成功源于專注

2014/2/26 6個使你與客戶溝通更愉快的小貼士

2014/2/25 別盯著巨頭,創(chuàng)業(yè)者應該學著在夾縫中找出路

2014/2/24 論互聯(lián)網(wǎng)的顛覆與傳統(tǒng)企業(yè)的被顛覆

2014/2/22 原創(chuàng)文章出處比轉摘的排名后問題探討

2014/2/21 安全聯(lián)盟認證將交付第三方認證并收費

2014/2/20 互聯(lián)網(wǎng)創(chuàng)業(yè):模仿是成功的第一步

2014/2/19 互聯(lián)網(wǎng)營銷中的“互聯(lián)網(wǎng)思維營銷”

2014/2/18 閑話互聯(lián)網(wǎng)保險

2014/2/17 三招教你快速成為一個SEOer

2014/2/16 第三方工具搜索來路查詢可查PC和移動來路

2014/2/15 15個最佳引導工具設計

2014/2/14 情人節(jié),你被營銷了沒

2014/2/13 哪種類型的網(wǎng)站更適合你的企業(yè)

2014/2/12 只需一招,快速提高外鏈的有效率