您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)bootstrap媒體查詢的作用是什么,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
在Bootstrap中,媒體查詢可以通過屏幕的大小來分辨使用的設(shè)備并設(shè)置不同樣式,可以在不同的條件下使用不同的樣式,使頁面在不同在終端設(shè)備下達(dá)到不同的渲染效果。
本教程操作環(huán)境:Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦
bootstrap媒體查詢通過屏幕的大小來分辨你使用的設(shè)備
額外的小設(shè)備(手機(jī),小于 768px)
小型設(shè)備(平板電腦,768px 起)
中型設(shè)備(臺(tái)式電腦,992px 起)
大型設(shè)備(大臺(tái)式電腦,1200px 起)
媒體查詢能在不同的條件下使用不同的樣式,使頁面在不同在終端設(shè)備下達(dá)到不同的渲染效果。前面簡單的介紹了媒體查詢如何引用到項(xiàng)目中,但媒體查詢有其自己的使用規(guī)則。具體來說,媒體查詢 的使用方法如下。
@media 媒體類型and (媒體特性){你的樣式}
注意:使用媒體查詢必須要使用“@media”開頭,然后指定媒體類型(也可以稱為設(shè)備類型),隨后是指定媒體特性(也可以稱之為設(shè)備特性)。媒體特性的書寫方式和樣式的書寫方式非常相似,主要分為兩個(gè)部分,第一個(gè)部分指的是媒體特性,第二部分為媒體特性所指定的值,而且這兩個(gè)部分之間使用冒號(hào)分隔。例如:
(max-width: 480px) 從前面表中可以得知,主要有十種媒體類型和13種媒體特性,將其組合就類似于不同的CSS集合。 但與CSS屬性不同的是,媒體特性是通過min/max來表示大于等于或小于做為邏輯判斷, 而不是使用小于(<)和大于(>)這樣的符號(hào)來判斷。接下來一起來看看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í),頁面中的廣告區(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é)合在一起。也就是說,一個(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è)備的尺寸來設(shè)置相應(yīng)的樣式(或者調(diào)用相應(yīng)的樣式文件)。同樣的,對于屏幕設(shè)備同樣可以使用“min/max”對應(yīng)參數(shù),如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px,比如說iPhone上的顯示,這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率,也就是指可視面積分辨率。
5、not關(guān)鍵詞
使用關(guān)鍵詞“not”是用來排除某種制定的媒體類型,也就是用來排除符合表達(dá)式的設(shè)備。換句話說,not關(guān)鍵詞表示對后面的表達(dá)式執(zhí)行取反操作,如:
@media not print and (max-width: 1200px){樣式代碼}
上面代碼表示的是:樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中。
6、only關(guān)鍵詞
only用來指定某種特定的媒體類型,可以用來排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來對那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。其主要有:支持媒體特性的設(shè)備,正常調(diào)用樣式,此時(shí)就當(dāng)only不存在;表示不支持媒體特性但又支持媒體類型的設(shè)備,這樣就會(huì)不讀樣式,因?yàn)槠湎葧?huì)讀取only而不是screen;另外不支持Media Queries的瀏覽器,不論是否支持only,樣式都不會(huì)被采用。如
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
在Media Query中如果沒有明確指定Media Type,那么其默認(rèn)為all,如:
<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
另外在樣式中,還可以使用多條語句來將同一個(gè)樣式應(yīng)用于不同的媒體類型和媒體特性中,指定方式如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上,或者被用于屏幕寬度大于或等于960px的設(shè)備上。
到目前為止,CSS3 媒體查詢得到了眾多瀏覽器支持,除了IE6-8瀏覽器不支持之外,在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個(gè)與眾不同的是,媒體查詢在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。
上述就是小編為大家分享的bootstrap媒體查詢的作用是什么了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。