這篇文章主要介紹“CSS3媒體查詢代碼怎么寫(xiě)”，在日常操作中，相信很多人在CSS3媒體查詢代碼怎么寫(xiě)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS3媒體查詢代碼怎么寫(xiě)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
三門(mén)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司2013年至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
CSS3媒體查詢：
語(yǔ)法：
關(guān)鍵詞“not”取補(bǔ)集，“only”不再推薦使用（not，only都是可選的），“，”用法同CSS選擇器中的逗號(hào)用法，表示一種合寫(xiě)。
@media not|only mediaType and （mediaFeature） {
CSS Codes;
}
或
或
及：（這種可以在style標(biāo)簽里使用，也可以在一個(gè)css文件里使用）
@media not|only mediaType and （mediaFeature）{
選擇器{
屬性：屬性值;
}
}
媒體查詢大部分都接受前綴min或max，表示大于等于或小于等于。（切記min和max對(duì)應(yīng)的順序，不要被表象所誤導(dǎo)）
and前后必須留空格，例如：（瀏覽器不產(chǎn)生任何效果）
@media screen and（max-width:600px）{
h3{
color:red
}
}
媒體類(lèi)型：（一些類(lèi)型已從CSS3刪除）
all --用于所有設(shè)備
print --用于打印機(jī)及打印預(yù)覽
screen --用于電腦、平板、手機(jī)屏幕（一般只用這個(gè)和all）
speech --用于屏幕閱讀器等發(fā)聲設(shè)備
媒體特性：
width --頁(yè)面可見(jiàn)區(qū)域的寬（一般只用這個(gè)和device-width）
height --頁(yè)面可見(jiàn)區(qū)域的高
device-width --設(shè)備的屏幕可見(jiàn)區(qū)域?qū)?/p>
device-height --設(shè)備的屏幕可見(jiàn)區(qū)域高
aspect-ratio --設(shè)備的width與height的比
device-aspect-ratio --設(shè)備的device-width與device-height的比
resolution --設(shè)備的分辨率，如96dpi, 300dpi，118dpcm
orientation --定義height是否大于或等于width，值portrait代表是，landscape代表否
以上參數(shù)（除最后一個(gè)）均可以加max-或min-前綴。
前四個(gè)參數(shù)比較常用，單位都是CSS的絕對(duì)單位，包括px em mm cm等。
部分用法：
@media screen and （orientation:portrait）{
h3{
color:red;
}
}
@media screen and （max-aspect-ratio:4/3）{
h3{
color:red;
}
}
@media screen and （min-resolution:96dpi）{
h3{
color:red;
}
}
全部參數(shù)詳見(jiàn)：
常用的幾種屏幕寬度設(shè)定：
@media screen and （min-width:1200px） {
css-code;
}
@media screen and（min-width:960px） and （max-width:1199px） {
css-code;
}
@media screen and（min-width:768px） and （max-width:959px） {
css-code;
}
@media screen and（min-width:480px） and （max-width:767px） {
css-code;
}
@media screen and （max-width:479px） {
css-code;
}
使用JS動(dòng)態(tài)查詢媒體特征：
window.matchMedia（）方法接受一個(gè)media_query語(yǔ)句的字符串作為參數(shù)，返回一個(gè)MediaQueryList對(duì)象，該對(duì)象有media和matches兩個(gè)屬性。
media：返回所查詢的media_query語(yǔ)句字符串
matches：返回一個(gè)布爾值，表示當(dāng)前環(huán)境是否匹配查詢語(yǔ)句
注意：如果matchMedia無(wú)法解析media_query參數(shù)，matches屬性返回的總是false，而不是報(bào)錯(cuò)
例如：
var result=window.matchMedia（"screen （min-width: 600px）"）;
console.log（result.media）; //"（min-width: 600px）"
console.log（result.matches）; //true
matchMedia方法返回的MediaQueryList對(duì)象有兩個(gè)方法，用來(lái)監(jiān)聽(tīng)事件：addListener和removeListener
mql.addListener（mqCallback）;
mql.removeListener（mqCallback）;
注意，只有mediaQuery查詢結(jié)果發(fā)生變化時(shí)，才調(diào)用指定的回調(diào)函數(shù)mqCallback，所以，如果想要mediaQuery查詢未變化時(shí)，就顯示相應(yīng)效果，需要提前調(diào)用一次函數(shù)。
下面這個(gè)例子是當(dāng)頁(yè)面寬度小于1000px時(shí)，頁(yè)面背景顏色為品紅色；否則為淡藍(lán)色：
var mql=window.matchMedia（"（min-width: 1000px）"）;//mql=media query list
function mqCallback（mql）{
if （mql.matches）{
document.body.background='pink';
}else{
document.body.background='lightblue';
}
}
mqCallback（mql）;
mql.addListener（mqCallback）;
//注意，addListener觸發(fā)條件是每次改變matches值時(shí)，只有true<->false才是叫做改變，true<->true或false<->false不算改變也不會(huì)觸發(fā)addListener。
到此，關(guān)于“CSS3媒體查詢代碼怎么寫(xiě)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
重慶分公司
重慶分公司
