CSS Media媒体查询
媒介类型
在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-widthheight | min-height | max-heightdevice-width | min-device-width | max-device-widthdevice-height | min-device-height | max-device-heightaspect-ratio | min-aspect-ratio | max-aspect-ratiodevice-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratiocolor | min-color | max-colorcolor-index | min-color-index | max-color-indexmonochrome | min-monochrome | max-monochromeresolution | min-resolution | max-resolutionscan | 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操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用
[注意]经测试,无论是否使用only操作符都对结果无影响
<style media="only screen and (max-width:1000px)">.box{width: 100px;height: 100px;background-color: pink;}</style><div class="box"></div>
实际上,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属性的不同结果,进行对应的设置
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';} }
转载于:https://blog.51cto.com/33997k7k/1923995
CSS Media媒体查询相关推荐
- 前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端 注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
- 深入理解CSS Media媒体查询
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- css@media媒体查询
Media所有参数汇总 width:浏览器可视宽度. height:浏览器可视高度. device-width:设备屏幕的宽度. device-height:设备屏幕的高度. orientation: ...
- CSS:媒体查询 CSS3 Media Queries
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
- CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)
随着宽屏的不断普及,CSS3出现了@media媒体查询技术 一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
- css3 media媒体查询器用法总结
原文地址:http://www.cnblogs.com/zhaodifont/p/3858657.html 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6 ...
- @media媒体查询
@media媒体查询 媒体查询(media Query)是CSS3新语法 使用 @media 查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏 ...
- @media媒体查询 响应式页面的简单实现
引言 忘记了媒体查询是怎么用的了, 看了一下文档, 随手写的最基本的实现思路, 超级简陋, 不要嫌弃. 图片替换一下就能看到效果.嗯- 还是把文件也存上来吧. 记一下, 下次再忘了直接看一眼就可以了. ...
- 【css】媒体查询(总结)
[css]媒体查询 文章目录 [css]媒体查询 写在前面 媒体查询: 一.认识viewport 二.关于三个viewport的理论 layout viewport(布局视口) visual view ...
最新文章
- Struts2后期(这框架目前正处于淘汰状态)
- 反射的本质——元数据
- Activiti部署报错
- python mean dropna_小丸子踏入python之路:python_day05(用Pandas处理泰坦尼克船员获救数据titanic_train.csv)...
- Docker最全教程之MySQL容器化 (二十四)
- linux常用命令--开发调试篇
- Github简单使用
- opencv-api cvtColor
- JUnit5 断言示例
- 手把手教你如何罗列提纲,避开这3个坑,提升写作效率50%
- SN3FAP反激式开关电源12V2A输出电路
- 概率机器人书 电子版
- safari显示找不到服务器,苹果自带浏览器找不到服务器是什么问题
- RGB VGA显示时序
- 永城2021高考成绩查询,永城中考成绩查询2021
- 报错: com.alibaba.druid.pool.DruidDataSource : abandon connection, owner thread
- pta简单的插入排序
- NBA表格_NBA球星大排位16—季后赛荣誉汇总
- python空类型用什么表示_python空集合如何表示
- video.js 视频直播前端展示