我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

CSSMedia媒体查询

媒介类型

在CSS2中,媒体查询只使用于

媒体属性

媒体属性是CSS3新增的内容,多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符

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

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

CSS Media媒体查询

     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

CSS Media媒体查询

【1】颜色(color)

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

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

CSS Media媒体查询

CSS Media媒体查询

【2】颜色索引(color-index)

颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于0

向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示,说明返回值为0)

CSS Media媒体查询

    

CSS Media媒体查询

【3】宽高比(aspect-ratio)

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

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

CSS Media媒体查询

CSS Media媒体查询

【4】设备宽高比(device-aspect-ratio)

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

向宽高比为16:9的特殊宽屏设备应用样式表

CSS Media媒体查询

CSS Media媒体查询

【5】设备高度(device-height)

设备高度描述了输出设备的高度

向显示在最小高度1000px的屏幕上的文档应用样式表

CSS Media媒体查询

CSS Media媒体查询

【6】设备宽度(device-width)

设备宽度描述了输出设备的宽度 

向显示在最小宽度1000px的屏幕上的文档应用样式表

CSS Media媒体查询

CSS Media媒体查询

【7】网格(grid)

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

向非网格设备应用样式表

CSS Media媒体查询

CSS Media媒体查询

【8】高度(height)

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

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

CSS Media媒体查询

CSS Media媒体查询

【9】宽度(width)

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

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

CSS Media媒体查询

CSS Media媒体查询

【10】黑白(monochrome)

黑白指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0

向非黑白设备应用样式表

CSS Media媒体查询

CSS Media媒体查询

【11】方向(orientation)

方向指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式

值:landscape(横屏) | portrait(竖屏)

向竖屏设备应用样式表

CSS Media媒体查询

CSS Media媒体查询

【12】分辨率(resolution)

分辨率指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示

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

向每英寸至少90点的设备应用样式

CSS Media媒体查询

CSS Media媒体查询

【13】扫描(scan)

扫描描述了电视输出设备的扫描过程

值: progressive | interlace

 

语法

媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假

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

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

CSS Media媒体查询

逻辑操作符

操作符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操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

[注意]经测试,无论是否使用only操作符都对结果无影响

.box{width: 100px;height: 100px;background-color: pink;}

实际上,only、not、and和or(用逗号表示)这四种逻辑中,只有and比较常用

 

方法

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属性的不同结果,进行对应的设置

CSS Media媒体查询

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

CSS Media媒体查询

[注意]如果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时,页面背景颜色为品红色;否则为淡蓝色

CSS Media媒体查询

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


分享题目:CSSMedia媒体查询
URL网址:http://shouzuofang.com/article/jejjgo.html

其他资讯