什么是媒體查詢以及他們如何工作
CSS3引入了一個新概念，Media Queries,中文直譯為“媒體查詢”，能夠允許基于各種瀏覽設備的網站建設而無需改變實際內容本身，毋庸置疑的，在這個網站建設需要適應各種屏幕、各種PC、平板、手機等的時代，Media Queries將徹底的改變我們網頁設計的方式。
簡單點來說，就是Media Queries允許我們在不同的設備上輕松地展示及瀏覽我們的網站，這將是移動互聯網端網站建設的一個里程碑，并且為我們帶來了響應式網頁設計。Media Queries通過將簡化移動設備集成到我們的網站建設上，將對我們的網頁設計工作產生深遠的影響。
設置媒體查詢
媒體查詢工作，通過指定特定的條件和應用特定的樣式給他們。讓我們在一些不同類型的查詢，這將是為您解釋這些疑問的最有用的方式。
最大寬度
下面的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 }
}
視網膜：像素比和分辨率
視網膜顯示器的工作方式是它的2倍包的像素數在相同的空間量超過標準清晰度顯示器。如果你想針對視網膜顯示器改變了背景圖片為視網膜準備的人，你應該使用下面的查詢，它可以確保在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)建你的網站，你有一大堆的事情要在不同的設備或顯示第一種方式是有幫助的。
后記
現在你知道多一點有關媒體查詢可以得到多一點的技術。Media Queries由兩個部分組成，他們分別是media type 和 second is zero ，或者更多你所喜歡的Queries表達方式？
三招快速樹立企業(yè)的網絡品牌 微信公眾平臺、微信商城與騰訊風鈴的異同 18個小技巧教你識別低質量網站 黑色的回歸:令人驚嘆的黑色網站設計 網站區(qū)域性優(yōu)化與廣泛性優(yōu)化哪個效果好 網站運營：成功源于專注 6個使你與客戶溝通更愉快的小貼士 別盯著巨頭,創(chuàng)業(yè)者應該學著在夾縫中找出路 論互聯網的顛覆與傳統(tǒng)企業(yè)的被顛覆 原創(chuàng)文章出處比轉摘的排名后問題探討 安全聯盟認證將交付第三方認證并收費 互聯網創(chuàng)業(yè):模仿是成功的第一步 互聯網營銷中的“互聯網思維營銷” 閑話互聯網保險 三招教你快速成為一個SEOer 第三方工具搜索來路查詢可查PC和移動來路 15個最佳引導工具設計 情人節(jié),你被營銷了沒 哪種類型的網站更適合你的企業(yè) 只需一招,快速提高外鏈的有效率
