AI专业者开发社区 1 号成员
  •  0 回帖  •  9 浏览  •  4 个月前
   

深入理解CSS Media媒体查询

前面的话

　　一说到响应式设计，肯定离不开媒体查询 media。一般认为媒体查询是 CSS3 的新增内容，实际上 CSS2 已经存在了，CSS3 新增了媒体属性和使用场景 (IE8- 浏览器不支持)。本文将详细介绍媒体查询的内容

 

媒介类型

　　在 CSS2 中，媒体查询只使用于 <style> 和 <link> 标签中，以 media 属性存在

　　media 属性用于为不同的媒介类型规定不同的样式

screen         计算机屏幕（默认值）    
tty            电传打字机以及使用等宽字符网格的类似媒介
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 新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与 HTML 和 XML 冲突的“<”和“>”字符

　　[注意]媒体属性必须用括号 () 包起来，否则无效

　　下表中列出了所有的媒体属性

     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）

　　指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为 0

　　向所有能显示颜色的设备应用样式表

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

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

　　颜色索引指定了输出设备中颜色查询表中的条目数量，如果没有使用颜色查询表，则值等于 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）

　　宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例

　　向可视区域是正方形或者是宽屏的设备应用样式表

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

【4】设备宽高比（device-aspect-ratio）

　　设备宽高比描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例

　　向宽高比为 16: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】网格（grid）

　　网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为 1，否则为 0　　

　　向非网格设备应用样式表

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

【8】高度（height）

　　高度描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度

　　向高度大于 800px 的可视区域的设备应用样式表

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

【9】宽度（width）

　　宽度描述了输出设备渲染区域的宽度

　　向宽度大于 800px 的可视区域的设备应用样式表

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

【10】黑白（monochrome）

　　黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为 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）的点数来表示

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

　　向每英寸至少 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 新增的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假

　　当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， <link> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）

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

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

　　media 并不是 'print'，所以媒体查询为假。但是，style.css 文件依然被下载

逻辑操作符

　　操作符 not、and、only 和逗号 (,) 可以用来构建复杂的媒体查询

and

　　and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真

　　[注意] 在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all

　　满足横屏以及最小宽度为 700px 的条件应用样式表

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

　　由于不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为

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

or

　　将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于 or 操作符

　　满足最小宽度为 700 像素或是横屏的手持设备应用样式表

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

not

　　not 操作符用来对一条媒体查询的结果进行取反

　　[注意]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- 浏览器不支持，可以使用第三方函数库matchMedia.js

属性

　　window.matchMedia() 方法接受一个 mediaQuery 语句的字符串作为参数，返回一个 MediaQueryList 对象。该对象有 media 和 matches 两个属性

media：返回所查询的 mediaQuery 语句字符串
matches：返回一个布尔值，表示当前环境是否匹配查询语句
var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true

　　可以根据 matchMedia() 方法的 matches 属性的不同结果，进行对应的设置

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

　　[注意] 如果 window.matchMedia 无法解析 mediaQuery 参数，matches 属性返回的总是 false，而不是报错

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

事件

　　window.matchMedia 方法返回的 MediaQueryList 对象有两个方法，用来监听事件：addListener 方法和 removeListener 方法

// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);

　　注意，只有 mediaQuery 查询结果发生变化时，才调用指定的回调函数

　　所以，如果想要 mediaQuery 查询未变化时，就显示相应效果，需要提前调用一次函数

　　下面这个例子是当页面宽度小于 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';
  }
}

　　打开 mediaQuery 的 DEMO

 

打印样式

　　媒体查询的一个常用功能是打印样式的设置，主要是背景清除、字体颜色变黑等

@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 浏览器起作用，避免在元素内部插入分页符*/
        page-break-inside:avoid;
    }
    thead{
        display:table-header-group;
    }
    tr,img{
        page-break-inside:avoid;
    }
    img{
        max-width:100%!important;
    }
    p,h2,h3{
        /*元素内部发生分页时，最少保留 3 行*/
        orphans:3;
        /*元素内部发生分页时，元素顶部最少保留 3 行*/
        windows:3;
    }
    h2,h3{
        /*避免在元素后面插入一个分页符*/
        page-break-after:avoid;
    }
}

 

相对单位

　　如果媒体查询 @media 使用的是相对单位，如 rem，这里有一个坑需要着重强调一下

　　一般而言，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)"