什么是媒體查詢以及他們?nèi)绾喂ぷ?/h1>

發(fā)布日期：[2014/3/6]   編輯：奇億廣州網(wǎng)站建設(shè)

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

     簡(jiǎn)單點(diǎn)來說，就是Media Queries允許我們?cè)诓煌�的設(shè)備上輕松地展示及瀏覽我們的網(wǎng)站，這將是移動(dòng)互聯(lián)網(wǎng)端網(wǎng)站建設(shè)的一個(gè)里程碑，并且為我們帶來了響應(yīng)式網(wǎng)頁設(shè)計(jì)。Media Queries通過將簡(jiǎn)化移動(dòng)設(shè)備集成到我們的網(wǎng)站建設(shè)上，將對(duì)我們的網(wǎng)頁設(shè)計(jì)工作產(chǎn)生深遠(yuǎn)的影響。

設(shè)置媒體查詢

      媒體查詢工作，通過指定特定的條件和應(yīng)用特定的樣式給他們。讓我們?cè)谝恍┎煌�類型的查�?/FONT>，這將是為您解釋這些疑問的最有用的方式。

最大寬度

下面的CSS只適用于大小比為300px的可視面積設(shè)計(jì)。

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

最小寬度

下面的CSS規(guī)則將適用可視面積尺寸大于600px的設(shè)計(jì)。

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

兩者結(jié)合

最常見也是最有效的最小&最大寬度查詢，因?yàn)樗�提供了更多的精度。下面的CSS代碼將適用于可視面積為300px和600px之間的設(shè)計(jì)。

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

實(shí)際上，如果你想要定制特定的設(shè)備，你可以將這一對(duì)查詢?cè)O(shè)計(jì)放在一起。

設(shè)備寬度

設(shè)備的寬度從常規(guī)最小和最大寬度的查詢不同，因?yàn)樗鼘?shí)際上是指一個(gè)給定的設(shè)備的分辨率。因此，下面的查詢將只適用于CSS分辨率為960px的顯示器 - 相當(dāng)于一個(gè)iPhone 4的顯示屏大小。

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

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

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

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

風(fēng)景與肖像

此查詢僅適用于某些設(shè)備，如解鎖iPhone和iPad，因?yàn)樗�是不支持所有的設(shè)備的。但你可以當(dāng)一個(gè)設(shè)備是縱向或橫向像下面的例子指定CSS規(guī)則。

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

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

調(diào)用媒體查詢的另外一種方法

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

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

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

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

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

后記

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

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

2014/3/4 微信公眾平臺(tái)、微信商城與騰訊風(fēng)鈴的異同

2014/3/3 18個(gè)小技巧教你識(shí)別低質(zhì)量網(wǎng)站

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

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

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

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

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

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

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

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

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)保險(xiǎn)

2014/2/17 三招教你快速成為一個(gè)SEOer

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

2014/2/15 15個(gè)最佳引導(dǎo)工具設(shè)計(jì)

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

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

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

或者將本文《什么是媒體查詢以及他們?nèi)绾喂ぷ?/a>》收藏和分享到：
復(fù)制本文《什么是媒體查詢以及他們?nèi)绾喂ぷ鳌返刂方o好友：