CSSMedia媒體查詢

媒介類型

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

成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)服務(wù)團(tuán)隊(duì)是一支充滿著熱情的團(tuán)隊(duì)，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時(shí)竭誠(chéng)為客戶提供服務(wù)是我們的理念。成都創(chuàng)新互聯(lián)把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來(lái)開(kāi)發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！

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

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

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

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

媒體屬性

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

[注意]媒體屬性必須用括號(hào)()包起來(lái)，否則無(wú)效

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

     width | min-width | max-width
     height | min-height | max-height
     device-width | min-device-width | max-device-width
     device-height | min-device-height | max-device-height
     aspect-ratio | min-aspect-ratio | max-aspect-ratio
     device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
     color | min-color | max-color
     color-index | min-color-index | max-color-index
     monochrome | min-monochrome | max-monochrome
     resolution | min-resolution | max-resolution
     scan | grid

【1】顏色（color）

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

向所有能顯示顏色的設(shè)備應(yīng)用樣式表

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

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

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

向所有使用至少256個(gè)索引顏色的設(shè)備應(yīng)用樣式表(下列代碼無(wú)顯示，說(shuō)明返回值為0)

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

【3】寬高比（aspect-ratio）

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

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

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

【4】設(shè)備寬高比（device-aspect-ratio）

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

向?qū)捀弑葹?6:9的特殊寬屏設(shè)備應(yīng)用樣式表

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

【5】設(shè)備高度（device-height）

設(shè)備高度描述了輸出設(shè)備的高度

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

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

【6】設(shè)備寬度（device-width）

設(shè)備寬度描述了輸出設(shè)備的寬度 

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

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

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

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

【8】高度（height）

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

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

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

【9】寬度（width）

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

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

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

【10】黑白（monochrome）

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

向非黑白設(shè)備應(yīng)用樣式表

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

【11】方向（orientation）

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

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

向豎屏設(shè)備應(yīng)用樣式表

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

【12】分辨率（resolution）

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

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

向每英寸至少90點(diǎn)的設(shè)備應(yīng)用樣式

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

【13】掃描（scan）

掃描描述了電視輸出設(shè)備的掃描過(guò)程

值： progressive | interlace

 

語(yǔ)法

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

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

<link rel="stylesheet" href="style.css" media="print"><div class="box"></div>

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

邏輯操作符

操作符not、and、only和逗號(hào)(,)可以用來(lái)構(gòu)建復(fù)雜的媒體查詢

and

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

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

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

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

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

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

or

將多個(gè)媒體查詢以逗號(hào)分隔放在一起；只要其中任何一個(gè)為真，整個(gè)媒體語(yǔ)句就返回真，相當(dāng)于or操作符

滿足最小寬度為700像素或是橫屏的手持設(shè)備應(yīng)用樣式表

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

not

not操作符用來(lái)對(duì)一條媒體查詢的結(jié)果進(jìn)行取反

[注意]not關(guān)鍵字僅能應(yīng)用于整個(gè)查詢，而不能單獨(dú)應(yīng)用于一個(gè)獨(dú)立的查詢

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

only

only操作符表示僅在媒體查詢匹配成功時(shí)應(yīng)用指定樣式?？梢酝ㄟ^(guò)它讓選中的樣式在老式瀏覽器中不被應(yīng)用

[注意]經(jīng)測(cè)試，無(wú)論是否使用only操作符都對(duì)結(jié)果無(wú)影響

<style media="only screen and (max-width:1000px)">.box{width: 100px;height: 100px;background-color: pink;}</style><div class="box"></div>

實(shí)際上，only、not、and和or(用逗號(hào)表示)這四種邏輯中，只有and比較常用

 

方法

window.matchMedia()方法用來(lái)檢查CSS的mediaQuery語(yǔ)句

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

屬性

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

media：返回所查詢的mediaQuery語(yǔ)句字符串
matches：返回一個(gè)布爾值，表示當(dāng)前環(huán)境是否匹配查詢語(yǔ)句

var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'console.log(result.matches); // true

可以根據(jù)matchMedia()方法的matches屬性的不同結(jié)果，進(jìn)行對(duì)應(yīng)的設(shè)置

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

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

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

事件

window.matchMedia方法返回的MediaQueryList對(duì)象有兩個(gè)方法，用來(lái)監(jiān)聽(tīng)事件：addListener方法和removeListener方法

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

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

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

下面這個(gè)例子是當(dāng)頁(yè)面寬度小于1000px時(shí)，頁(yè)面背景顏色為品紅色；否則為淡藍(lán)色

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';
  }
}

文章標(biāo)題：CSSMedia媒體查詢
文章位置：http://muchs.cn/article10/jejjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站策劃、全網(wǎng)營(yíng)銷推廣、網(wǎng)站營(yíng)銷、ChatGPT、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)