CSS Media媒体查询使用大全，完整媒体查询总结

本文转载自：https://www.cnblogs.com/lguow/p/9316598.html（感谢分享）
前面的话

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

媒介类型

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

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

screen 计算机屏幕（默认值）
tty 电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection 放映机
handheld 手持设备（小屏幕、有限的带宽）
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备

　　真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’

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

媒体属性

　　媒体属性是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

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

复制代码

@media (color){
.box{height: 100px;width: 100px;background-color: lightblue;}
}

复制代码
【2】颜色索引（color-index）

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

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

复制代码

@media (min-color-index: 256){
.box{height: 100px; width: 100px;background-color: lightgreen;}
}

复制代码
【3】宽高比（aspect-ratio）

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

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

复制代码

@media (min-aspect-ratio: 1/1) {
.box{height: 100px;width: 100px; background-color: lightgreen; }
}

复制代码
【4】设备宽高比（device-aspect-ratio）

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

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

复制代码

@media (device-aspect-ratio:16/9) {
.box{ height: 100px;width: 100px; background-color: pink;}
}

复制代码
【5】设备高度（device-height）

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

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

复制代码

@media (min-device-height: 1000px) {
.box{ height: 100px;width: 100px; background-color: pink;}
}

复制代码
【6】设备宽度（device-width）

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

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

复制代码

@media (min-device-width: 1000px) {
.box{ height: 100px; width: 100px;background-color: lightblue; }
}

复制代码
【7】网格（grid）

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

　　向非网格设备应用样式表

复制代码

@media (grid:0) {
.box{height: 100px;width: 100px; background-color: lightgreen;}
}

复制代码
【8】高度（height）

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

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

复制代码

@media (min-height:800px) {
.box{ height: 100px; width: 100px;background-color: lightgreen; }
}

复制代码
【9】宽度（width）

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

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

复制代码

@media (min-width:800px) {
.box{ height: 100px;width: 100px; background-color: lightgreen;}
}

复制代码
【10】黑白（monochrome）

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

　　向非黑白设备应用样式表

复制代码

@media (monochrome:0) {
.box{height: 100px; width: 100px; background-color: lightgreen;}
}

复制代码
【11】方向（orientation）

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

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

　　向竖屏设备应用样式表

复制代码

@media (orientation: portrait) {
.box{height: 100px;width: 100px;background-color: lightgreen; }
}

复制代码
【12】分辨率（resolution）

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

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

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

复制代码