這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)bootstrap媒體查詢的作用是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都做網(wǎng)站、調(diào)兵山網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)、調(diào)兵山網(wǎng)絡(luò)營(yíng)銷、調(diào)兵山企業(yè)策劃、調(diào)兵山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供調(diào)兵山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

在Bootstrap中，媒體查詢可以通過(guò)屏幕的大小來(lái)分辨使用的設(shè)備并設(shè)置不同樣式，可以在不同的條件下使用不同的樣式，使頁(yè)面在不同在終端設(shè)備下達(dá)到不同的渲染效果。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

bootstrap媒體查詢通過(guò)屏幕的大小來(lái)分辨你使用的設(shè)備

• 額外的小設(shè)備（手機(jī)，小于 768px）

• 小型設(shè)備（平板電腦，768px 起）

• 中型設(shè)備（臺(tái)式電腦，992px 起）

• 大型設(shè)備（大臺(tái)式電腦，1200px 起）

媒體查詢能在不同的條件下使用不同的樣式，使頁(yè)面在不同在終端設(shè)備下達(dá)到不同的渲染效果。前面簡(jiǎn)單的介紹了媒體查詢如何引用到項(xiàng)目中，但媒體查詢有其自己的使用規(guī)則。具體來(lái)說(shuō)，媒體查詢 的使用方法如下。

@media 媒體類型and （媒體特性）{你的樣式}

注意：使用媒體查詢必須要使用“@media”開(kāi)頭，然后指定媒體類型（也可以稱為設(shè)備類型），隨后是指定媒體特性（也可以稱之為設(shè)備特性）。媒體特性的書(shū)寫方式和樣式的書(shū)寫方式非常相似，主要分為兩個(gè)部分，第一個(gè)部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個(gè)部分之間使用冒號(hào)分隔。例如：

(max-width: 480px)
從前面表中可以得知，主要有十種媒體類型和13種媒體特性，將其組合就類似于不同的CSS集合。
但與CSS屬性不同的是，媒體特性是通過(guò)min/max來(lái)表示大于等于或小于做為邏輯判斷，
而不是使用小于（<）和大于（>）這樣的符號(hào)來(lái)判斷。接下來(lái)一起來(lái)看看Media Queries在實(shí)際項(xiàng)目中常用的方式。

1、最大寬度max-width

“max-width”是媒體特性中最常用的一個(gè)特性，其意思是指媒體類型小于或等于指定的寬度時(shí)，樣式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：當(dāng)屏幕小于或等于480px時(shí),頁(yè)面中的廣告區(qū)塊（.ads）都將被隱藏。

2、最小寬度min-width

“min-width”與“max-width”相反，指的是媒體類型大于或等于指定寬度時(shí)，樣式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，容器“.wrapper”的寬度為980px。

3、多個(gè)媒體特性使用

Media Queries可以使用關(guān)鍵詞"and"將多個(gè)媒體特性結(jié)合在一起。也就是說(shuō)，一個(gè)Media Query中可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種媒體類型。

當(dāng)屏幕在600px~900px之間時(shí)，body的背景色渲染為“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4、設(shè)備屏幕的輸出寬度Device Width

在智能設(shè)備上，例如iPhone、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來(lái)設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）。同樣的，對(duì)于屏幕設(shè)備同樣可以使用“min/max”對(duì)應(yīng)參數(shù)，如“min-device-width”或者“max-device-width”。

上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px，比如說(shuō)iPhone上的顯示，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。

5、not關(guān)鍵詞

使用關(guān)鍵詞“not”是用來(lái)排除某種制定的媒體類型，也就是用來(lái)排除符合表達(dá)式的設(shè)備。換句話說(shuō)，not關(guān)鍵詞表示對(duì)后面的表達(dá)式執(zhí)行取反操作，如：

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

上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中。

6、only關(guān)鍵詞

only用來(lái)指定某種特定的媒體類型，可以用來(lái)排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來(lái)對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。其主要有：支持媒體特性的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only不存在；表示不支持媒體特性但又支持媒體類型的設(shè)備，這樣就會(huì)不讀樣式，因?yàn)槠湎葧?huì)讀取only而不是screen；另外不支持Media Queries的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。如

在Media Query中如果沒(méi)有明確指定Media Type，那么其默認(rèn)為all，如：

另外在樣式中，還可以使用多條語(yǔ)句來(lái)將同一個(gè)樣式應(yīng)用于不同的媒體類型和媒體特性中，指定方式如下所示。

上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。

到目前為止，CSS3 媒體查詢得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個(gè)與眾不同的是，媒體查詢?cè)谄渌麨g覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。

上述就是小編為大家分享的bootstrap媒體查詢的作用是什么了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。