媒体查询

媒体查询详解

媒体查询简介

♣ 媒体查询能够在不同的条件(一般指屏幕或者文档宽度)下使用不同的样式，从而达到不同的表现效果。

♣ 媒体查询包含一个可选的媒体类型，再满足CSS规范条件下包含零个或者多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.

♣ 样式表中CSS媒体查询@media (max-width:1200px){...}
♣ link元素中的CSS媒体查询<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

♣

基本语法

@media 媒体类型 and (媒体特性) { 样式 }

媒体类型(现可用)

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等
speech	应用于屏幕阅读器等发生设备

媒体特性
♣ 大多数媒体特性都可以带有’min-‘、’max-‘前缀，用来表示’最低’、’最高’。例如：’max-width:1200px’,表示应用其所包含样式最大宽度为1200px，大于1200px的设备上不会应用此样式

名称	值	是否接受min/max前缀	备注	示例
颜色索引（color-index）	integer	是	指定了输出设备中颜色查询表中的条目数量。	@media all and (min-color-index:256) { ... }
宽高比（aspect-ratio）	ratio	是	描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。	@media screen and (min-aspect-ratio: 1/1) { ... }
设备宽高比（device-aspect-ratio）	ratio	是	描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。	@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
设备高度（device-height）	length	是	描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。	@media all and (min-device-height:500px){...}
设备宽度（device-width）	length	是	描述了输出设备的宽度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。	<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
网格（grid）	length	是	判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。	@media handheld and (grid) and (max-width: 15em) { ... }
高度（height）/宽度（width）	length	是	height/width 媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度/宽度。	@media screen and (min-height:720px){...}
黑白（monochrome）	integer	是	指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。	@media all and (monochrome) { ... }
方向（orientation）	landscape(横屏)/portrait(竖屏)	否指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式。	@media all and (orientation: portrait) { ... }
分辨率（resolution）	resolution	是	指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。	@media print and (min-resolution: 300dpi) { ... }
扫描（scan）	progressive/interlace	否	描述了电视输出设备的扫描过程。	@media tv and (scan: progressive) { ... }

♣ 索引颜色：这种颜色下图像像素用一个字节表示它最多包含有256色的色表储存并索引其所用的颜色，它图像质量不高，占空间较少。

逻辑操作符

and关键词

and关键词能将多多个媒体特性结合在一起。例如：

@media screen and (min-width:600px) and (max-width:900px){
    body {background-color:#f5f5f5;}
}

not关键词

not关键词用来对一条媒体查询的结果取反。

@media not print and (max-width: 1200px){样式代码}

上述表达式中样式应用于除打印设备和设备宽度大于600px的所有设备中。

only关键词

only关键词仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。

    <link rel="stylesheet" media="only screen and (color)" href="example.css" />

上述表达式中only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式

♣ PS:若使用了not或only操作符，必须明确指定一个媒体类型。

逗号分隔表

媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

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

参考

媒体查询使用方法@media
CSS媒体查询