CSS3媒體查詢代碼怎么寫

這篇文章主要介紹“CSS3媒體查詢代碼怎么寫”，在日常操作中，相信很多人在CSS3媒體查詢代碼怎么寫問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3媒體查詢代碼怎么寫”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　CSS3媒體查詢：

　　語法：

　　<media_query_list>：<media_query>[,<media_query>]

　　<media_query>：only|not <mediaType> and <expression>[ and <expression>]

　　<expression>：<mediaFeature>:<value>

　　關鍵詞“not”取補集，“only”不再推薦使用（not，only都是可選的），“，”用法同CSS選擇器中的逗號用法，表示一種合寫。

　　@media not|only mediaType and （mediaFeature） {

　　CSS Codes;

　　}

　　或

　　<link rel="stylesheet" media="not|only mediaType and （mediaFeature）" href="">

　　或

　　<style type="text/css" media="not|only mediaType and （mediaFeature）">

　　@import url（"mystylesheet.css"）;

　　</style>

　　及：（這種可以在style標簽里使用，也可以在一個css文件里使用）

　　@media not|only mediaType and （mediaFeature）{

　　選擇器{

　　屬性：屬性值;

　　}

　　}

　　媒體查詢大部分都接受前綴min或max，表示大于等于或小于等于。（切記min和max對應的順序，不要被表象所誤導）

　　and前后必須留空格，例如：（瀏覽器不產生任何效果）

　　@media screen and（max-width:600px）{

　　h3{

　　color:red

　　}

　　}

　　媒體類型：（一些類型已從CSS3刪除）

　　all --用于所有設備

　　print --用于打印機及打印預覽

　　screen --用于電腦、平板、手機屏幕（一般只用這個和all）

　　speech --用于屏幕閱讀器等發聲設備

　　媒體特性：

　　width --頁面可見區域的寬（一般只用這個和device-width）

　　height --頁面可見區域的高

　　device-width --設備的屏幕可見區域寬

　　device-height --設備的屏幕可見區域高

　　aspect-ratio --設備的width與height的比

　　device-aspect-ratio --設備的device-width與device-height的比

　　resolution --設備的分辨率，如96dpi, 300dpi，118dpcm

　　orientation --定義height是否大于或等于width，值portrait代表是，landscape代表否

　　以上參數（除最后一個）均可以加max-或min-前綴。

　　前四個參數比較常用，單位都是CSS的絕對單位，包括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;

　　}

　　}

　　全部參數詳見：

　　常用的幾種屏幕寬度設定：

　　@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動態查詢媒體特征：

　　window.matchMedia（）方法接受一個media_query語句的字符串作為參數，返回一個MediaQueryList對象，該對象有media和matches兩個屬性。

　　media：返回所查詢的media_query語句字符串

　　matches：返回一個布爾值，表示當前環境是否匹配查詢語句

　　注意：如果matchMedia無法解析media_query參數，matches屬性返回的總是false，而不是報錯

　　例如：

　　var result=window.matchMedia（"screen （min-width: 600px）"）;

　　console.log（result.media）; //"（min-width: 600px）"

　　console.log（result.matches）; //true

　　matchMedia方法返回的MediaQueryList對象有兩個方法，用來監聽事件：addListener和removeListener

　　mql.addListener（mqCallback）;

　　mql.removeListener（mqCallback）;

　　注意，只有mediaQuery查詢結果發生變化時，才調用指定的回調函數mqCallback，所以，如果想要mediaQuery查詢未變化時，就顯示相應效果，需要提前調用一次函數。

　　下面這個例子是當頁面寬度小于1000px時，頁面背景顏色為品紅色；否則為淡藍色：

　　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觸發條件是每次改變matches值時，只有true<->false才是叫做改變，true<->true或false<->false不算改變也不會觸發addListener。

到此，關于“CSS3媒體查詢代碼怎么寫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！