全面解析CSS Media媒體查詢使用操作（推薦）

2024-07-11 08:41:46

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

前面的話

　　一說到響應式設計，肯定離不開媒體查詢media。一般認為媒體查詢是CSS3的新增內(nèi)容，實際上CSS2已經(jīng)存在了，CSS3新增了媒體屬性和使用場景(IE8-瀏覽器不支持)。本文將詳細介紹媒體查詢的內(nèi)容

媒介類型

　　在CSS2中，媒體查詢只使用于<style>和<link>標簽中，以media屬性存在

　　media屬性用于為不同的媒介類型規(guī)定不同的樣式

screen         計算機屏幕（默認值）
tty            電傳打字機以及使用等寬字符網(wǎng)格的類似媒介
tv             電視類型設備（低分辨率、有限的屏幕翻滾能力）
projection     放映機
handheld       手持設備（小屏幕、有限的帶寬）
print          打印預覽模式 / 打印頁
braille        盲人用點字法反饋設備
aural          語音合成器
all            適合所有設備

　　真正廣泛使用且所有瀏覽器都兼容的媒介類型是'screen'和'all'

<style media="screen">.box{height: 100px;width: 100px; background-color: lightblue;}    </style><div class="box"></div>

媒體屬性

　　媒體屬性是CSS3新增的內(nèi)容，多數(shù)媒體屬性帶有“min-”和“max-”前綴，用于表達“小于等于”和“大于等于”。這避免了使用與HTML和XML沖突的“<”和“>”字符

　　[注意]媒體屬性必須用括號()包起來，否則無效

　　下表中列出了所有的媒體屬性

【1】顏色（color）

　　指定輸出設備每個像素單元的比特值。如果設備不支持輸出顏色，則該值為0

　　向所有能顯示顏色的設備應用樣式表

<style>@media (color){    .box{height: 100px;width: 100px;background-color: lightblue;}    }    </style><div class="box"></div>

【2】顏色索引（color-index）

　　顏色索引指定了輸出設備中顏色查詢表中的條目數(shù)量，如果沒有使用顏色查詢表，則值等于0

　　向所有使用至少256個索引顏色的設備應用樣式表(下列代碼無顯示，說明返回值為0)

<style>@media (min-color-index: 256){    .box{height: 100px; width: 100px;background-color: lightgreen;}    }    </style>    <div class="box"></div>

【3】寬高比（aspect-ratio）

　　寬高比描述了輸出設備目標顯示區(qū)域的寬高比。該值包含兩個以“/”分隔的正整數(shù)。代表了水平像素數(shù)（第一個值）與垂直像素數(shù)（第二個值）的比例

　　向可視區(qū)域是正方形或者是寬屏的設備應用樣式表

<style>@media (min-aspect-ratio: 1/1) {    .box{height: 100px;width: 100px; background-color: lightgreen; }        }</style><div class="box"></div>

【4】設備寬高比（device-aspect-ratio）

　　設備寬高比描述了輸出設備的寬高比。該值包含兩個以“/”分隔的正整數(shù)。代表了水平像素數(shù)（第一個值）與垂直像素數(shù)（第二個值）的比例

　　向?qū)捀弑葹?6:9的特殊寬屏設備應用樣式表

<style>@media (device-aspect-ratio:16/9) {    .box{ height: 100px;width: 100px; background-color: pink;}        }</style><div class="box"></div>

【5】設備高度（device-height）

　　設備高度描述了輸出設備的高度

　　向顯示在最小高度1000px的屏幕上的文檔應用樣式表

<style>@media (min-device-height: 1000px) {    .box{ height: 100px;width: 100px; background-color: pink;}        }</style><div class="box"></div>

【6】設備寬度（device-width）

　　設備寬度描述了輸出設備的寬度

　　向顯示在最小寬度1000px的屏幕上的文檔應用樣式表

<style>@media (min-device-width: 1000px) {    .box{ height: 100px; width: 100px;background-color: lightblue; }        }</style><div class="box"></div>

【7】網(wǎng)格（grid）

　　網(wǎng)格判斷輸出設備是網(wǎng)格設備還是位圖設備。如果設備是基于網(wǎng)格的（例如電傳打字機終端或只能顯示一種字形的電話），該值為1，否則為0　　

　　向非網(wǎng)格設備應用樣式表

<style>@media (grid:0) {    .box{height: 100px;width: 100px; background-color: lightgreen;}        }</style><div class="box"></div>

【8】高度（height）

　　高度描述了輸出設備渲染區(qū)域（如可視區(qū)域的高度或打印機紙盒的高度）的高度

　　向高度大于800px的可視區(qū)域的設備應用樣式表

<style>@media (min-height:800px) {    .box{ height: 100px; width: 100px;background-color: lightgreen; }        }</style><div class="box"></div>

【9】寬度（width）

　　寬度描述了輸出設備渲染區(qū)域的寬度

　　向?qū)挾却笥?00px的可視區(qū)域的設備應用樣式表

<style>@media (min-width:800px) {    .box{ height: 100px;width: 100px; background-color: lightgreen;}        }</style><div class="box"></div>

【10】黑白（monochrome）

　　黑白指定了一個黑白（灰度）設備每個像素的比特數(shù)。如果不是黑白設備，值為0

　　向非黑白設備應用樣式表

<style>@media (monochrome:0) {    .box{height: 100px; width: 100px; background-color: lightgreen;}        }</style><div class="box"></div>

【11】方向（orientation）

　　方向指定了設備處于橫屏（寬度大于寬度）模式還是豎屏（高度大于寬度）模式

　　值：landscape(橫屏) | portrait(豎屏)

　　向豎屏設備應用樣式表

<style>@media (orientation: portrait) {    .box{height: 100px;width: 100px;background-color: lightgreen; }        }</style><div class="box"></div>

【12】分辨率（resolution）

　　分辨率指定輸出設備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的點數(shù)來表示

　　[注意]關于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相關內(nèi)容移步至此

　　向每英寸至少90點的設備應用樣式

<style>@media (min-resolution: 90dpi) {    .box{height: 100px;width: 100px; background-color: lightgreen; }        }</style><div class="box"></div>

【13】掃描（scan）

　　掃描描述了電視輸出設備的掃描過程

　　值： progressive | interlace

語法

　　媒體查詢包含了一個CSS2已有的媒介類型(或稱為媒體類型)和CSS3新增的包含一個或多個表達式的媒體屬性，這些媒體屬性會被解析成真或假

　　當媒體查詢?yōu)檎鏁r，相關的樣式表或樣式規(guī)則就會按照正常的級聯(lián)規(guī)則被應用。即使媒體查詢返回假， <link> 標簽上帶有媒體查詢的樣式表仍將被下載（只不過不會被應用）

<link rel="stylesheet" href="style.css" media="print">

<div class="box"></div>

　　media并不是'print'，所以媒體查詢?yōu)榧佟５牵瑂tyle.css文件依然被下載

邏輯操作符

　　操作符not、and、only和逗號(,)可以用來構(gòu)建復雜的媒體查詢

and

　　and操作符用來把多個媒體屬性組合起來，合并到同一條媒體查詢中。只有當每個屬性都為真時，這條查詢的結(jié)果才為真

　　[注意]在不使用not或only操作符的情況下，媒體類型是可選的，默認為all

　　滿足橫屏以及最小寬度為700px的條件應用樣式表

@media all and (min-width: 700px) and (orientation: landscape) { ... }

　　由于不使用not或only操作符的情況下，媒體類型是可選的，默認為 all，所以可以簡寫為

@media (min-width: 700px) and (orientation: landscape) { ... }

　　將多個媒體查詢以逗號分隔放在一起；只要其中任何一個為真，整個媒體語句就返回真，相當于or操作符

　　滿足最小寬度為700像素或是橫屏的手持設備應用樣式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not

　　not操作符用來對一條媒體查詢的結(jié)果進行取反

　　[注意]not關鍵字僅能應用于整個查詢，而不能單獨應用于一個獨立的查詢

@media not all and (monochrome) { ... }//等價于@media not (all and (monochrome)) { ... }

only

　　only操作符表示僅在媒體查詢匹配成功時應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用

media="only screen and (max-width:1000px)"{...}

　　上面這行代碼，在老式瀏覽器中被解析為media="only"，因為沒有一個叫only的設備，所以實際上老式瀏覽器不會應用樣式

media="screen and (max-width:1000px)"{...}

　　上面這行代碼，在老式瀏覽器中被解析為media="screen"，它把后面的邏輯表達式忽略了。所以老式瀏覽器會應用樣式

　　所以，在使用媒體查詢時，only最好不要忽略

方法

　　window.matchMedia()方法用來檢查CSS的mediaQuery語句

　　[注意]IE9-瀏覽器不支持，可以使用第三方函數(shù)庫matchMedia.js

屬性

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

media：返回所查詢的mediaQuery語句字符串
matches：返回一個布爾值，表示當前環(huán)境是否匹配查詢語句
var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true

　　可以根據(jù)matchMedia()方法的matches屬性的不同結(jié)果，進行對應的設置

var result = window.matchMedia('(min-width: 600px)');if (result.matches) {  //}else{ //}

　　[注意]如果window.matchMedia無法解析mediaQuery參數(shù)，matches屬性返回的總是false，而不是報錯

var result = window.matchMedia('123');console.log(result.matches);//false

事件

　　window.matchMedia方法返回的MediaQueryList對象有兩個方法，用來監(jiān)聽事件：addListener方法和removeListener方法

// 指定回調(diào)函數(shù)mql.addListener(mqCallback);// 撤銷回調(diào)函數(shù)mql.removeListener(mqCallback);

　　注意，只有mediaQuery查詢結(jié)果發(fā)生變化時，才調(diào)用指定的回調(diào)函數(shù)

　　所以，如果想要mediaQuery查詢未變化時，就顯示相應效果，需要提前調(diào)用一次函數(shù)

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

var mql = window.matchMedia("(min-width: 1000px)");mqCallback(mql);mql.addListener(mqCallback);function mqCallback(mql) {  if (mql.matches) {    document.body.background = 'pink';  }else{      document.body.background = 'lightblue';  }}

打印樣式

　　媒體查詢的一個常用功能是打印樣式的設置，主要是背景清除、字體顏色變黑等

@media print{    *,*:before,*:after{        background:transparent!important;        color:#000 !important;        box-shadow: none !important;        text-shadow: none !important;    }    a,a:visited{        text-decoration: underline;    }    a[href]:after{        content:"(" attr(href) ")";    }    abbr[title]:after{        content:"(" attr(title) ")";    }    a[href^="#"]:after,a[href^="javascript:;"]:after{        content:"";    }    pre,blockquote{        border: 1px solid #999;        /*只有opera瀏覽器起作用，避免在元素內(nèi)部插入分頁符*/        page-break-inside:avoid;    }    thead{        display:table-header-group;    }    tr,img{        page-break-inside:avoid;    }    img{        max-width:100%!important;    }    p,h2,h3{        /*元素內(nèi)部發(fā)生分頁時，最少保留3行*/        orphans:3;        /*元素內(nèi)部發(fā)生分頁時，元素頂部最少保留3行*/        windows:3;    }    h2,h3{        /*避免在元素后面插入一個分頁符*/        page-break-after:avoid;    }}

相對單位

　　如果媒體查詢@media使用的是相對單位，如rem，這里有一個坑需要著重強調(diào)一下

　　一般而言，rem是相對于HTML的字體大小的。但是，由于媒體查詢的級別非常高，它并不是HTML的子元素，不是相對于HTML，而是相對于瀏覽器的，而瀏覽器的默認字體大小是16px

　　如果HTML設置字體大小為12px，設置如下媒體查詢

media="only screen and (max-width:1rem)"

　　實際上，max-width等于16px，而不是12px

　　而正是由于媒體查詢是相對于瀏覽器的，所以使用rem就沒有必要，完全可以使用em來替代

media="only screen and (max-width:1em)"

好了以上就是小編為大家整理的媒體查詢的全部內(nèi)容啦~希望大家繼續(xù)支持武林網(wǎng)~~~

上一篇：深入淺出學習層疊樣式表--css（推薦）

下一篇：CSS3系列之3D制作方法案例