首页 > > 网页制作 > css >

深入理解CSS Media媒体查询

2018-06-27 09:05:53来源：未知阅读 ()

前面的话

　　一说到响应式设计，肯定离不开媒体查询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操作符

　　满足最小宽度为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)"

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：C#遍历Object各个属性含List泛型嵌套。

下一篇：谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

DIV居中的经典方法 2020-06-13
CSS中的float和margin的混合使用 2020-06-11
Html/css 列表项区分列表首尾 2020-06-11
css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
ie8下透明度处理 2020-06-11

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签