CSS3媒体查询

所谓的媒体查询就是指，不同的条件使用不同的样式或样式集合。

写在前面，注意的几个问题：

1.device-width 和 width的区别： device-width表示的是设备的宽度，即屏幕的宽度。width所代表的是文档宽度，与屏幕大小没有关系，如果是在移动设备上，width表示的是布局视口的宽度。

2.必要的空格。

//空格是有必要的，在某些情况下该样式永远不起作用。
<link rel="stylesheet" media="(min-device-width:400px)【空格】and【空格】(max-device-width:900px)" href="css/style1.css">

媒体查询的语法

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

值得注意的是：当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false，<link> 标签指向的样式表也将会被下载(但是它们不会被应用)。

逻辑操作

and，且的关系，当所有的条件满足的时候返回true

//一个基本的媒体查询，即一个媒体属性和默认指定的all媒体类型
@media (min-width:700px){}

//如果你只想再横屏时候应用,你可以使用and操作符合并媒体属性
(min-width:700px)and(orientation:landscape){}

//如果你仅想在电视媒体上应用
@media tv and (min-width:700px) and (orientation:landscape){}

逗号分割列表，或的关系，只要有条件满足就返回ture

//如果你想在最小宽度为700像素或者横屏的手持设备上应用
@media (min-width:700px),handheld and (orientation:lanscape){}

not，类似于取反，最后参与运算的运算符

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

媒体类型



媒体特征

常用的媒体特征

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

//向所有能显示颜色的设备应用样式表：
@media all and (color) { ... }

//向每个颜色单元至少有4个比特的设备应用样式表：
@media all and (min-color: 4) { ... }

2.颜色索引，color-index,指定了输出设备中颜色查询表中的条目数量。

//向所有使用索引颜色的设备应用样式表，你可以这么做：
@media all and (color-index) { ... }

//向所有使用至少256个索引颜色的设备应用样式表：
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

3.宽高比（aspect-ratio） 描述了输出设备目标显示区域(渲染或文档)的宽高比,该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

//这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。
@media screen and (min-aspect-ratio: 1/1) { ... }

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

//宽高比或者16：9或者16：10。
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

5.设备高度/宽度，device-width/device-height 描述了输出设备的宽度/高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。

//向显示在最大宽度800px的屏幕上的文档应用样式表
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

6.宽/高 width/height 媒体属性描述了输出设备渲染区域（如可视区域的宽高或打印机纸盒的宽高）的宽高

7.方向 orientation 值 landscape | portrait ，指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式

//向竖屏设备应用样式表
@media all and (orientation: portrait) { ... }

8.分辨率 resolution指定输出设备的分辨率（像素密度）

//为每英寸至多300点的打印机应用样式：
@media print and (min-resolution: 300dpi) { ... }
//替换老旧的 (min-device-pixel-ratio: 2) 语法：
@media screen and (min-resolution: 2dppx) { ... }

本文只是简单的介绍的媒体查询的基本语法知识