由于工作需要，需要一个页面适配不同的显示设备，开始了解媒体查询，虽然早有耳闻但从来没有系统的学习过，今天将自己学习的成果做个分享，部分是从网上摘录的，也有自己的理解。若有不足还希望大家指出我会加以修改。废话过后，进入正题。现今无论是手机还是电脑，各种显示设备五花八门，这让开发者很是头疼。所以想要pc的页面同时适配手机等其他设备，我们的响应式设计就诞生了。实现响应式设计的主要方法是使用css的媒体查询。
1、什么是媒体查询
媒体查询可以让我们在不同显示器（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定不同的CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成（媒体查询有自己特定的表达式语法）。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以让一套代码适应多种设备。
2、媒体查询示例
从css版本2 开始，就可以通过媒体类型在css中获得媒体支持。就是在HTML页面的head 标签中插入如下一段代码：
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
但是上面这个方法，最大的弊端就是他会增加页面的http请求次数，增加了页面的负担，所以，用css3把样式都写在一个文件里面才是最佳的方法。首先需要在html文档中添加以下代码用来兼容移动设备的显示效果：
<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
我们来解释一下属性的作用：
width=device-width:宽度等于当前设备的宽度
initial-scale=1：初始的缩放比例（默认为1）
maximum-scale=1：允许用户缩放到得最大比例（默认为1）
user-scalable=no：用户不能手动缩放
下面我们来看一下具体的实现方法，若有部分语法不理解，请不要着急，后面会有讲解。
//当浏览器尺寸小于960px时代码
@media screen and (min-width:960px){
body{
background: #dcdcdc;
}
}
//当浏览器尺寸介于960px---1000px之间时代码
@media screen and (min-width:960px) and (max-width:1000px){
body{
background:yellow;
}
}
//当浏览器尺寸大于1000px时代码
@media screen and (max-width:1000px){
body{
background:red;
}
}
包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真，并且媒体查询中的所有表达式为真。 以上是将样式直接写在样式表中，我们也可以使用link元素来引入，如下代码：
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
若使用link元素引入，即使媒体查询返回假，改样式表也会被下载，只不过不会被引用而已。
包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真，并且媒体查询中的所有表达式为真。
注：若使用link元素引入，即使媒体查询返回假，改样式表也会被下载，只不过不会被引用而已。
3.逻辑操作符
• and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。例如：
(min-width: 700px) and (orientation: landscape) { ... }
• not 操作符用来对一条媒体查询的结果进行取反。not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。例如，not 在下面的查询中最后被计算：
@media not all and (monochrome) { ... }
等价于： @media not (all and (monochrome)) { ... }
而不是： @media (not all) and (monochrome) { ... }
• only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。 若使用了 not 或 only 操作符，必须明确指定一个媒体类型。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
• 你也可以将多个媒体查询以逗号分隔放在一起，只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。 例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
注：在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。
4.媒体属性
大多数媒体属性带有“min-”和“max-”前缀，用于表达“大于等于”和“小于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值，并且该特性的实际值不为零，则该表达式被解析为真。
• 颜色（color）
是否接受 min/max 前缀：是
指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。 注意：如果每个颜色单元具有不同数量的比特值，则使用最小的。
例如，如果显示器为蓝色和红色提供5比特，而为绿色提供6比特，则认为每个颜色单元有5比特。如果设备使用索引颜色，则使用颜色表中颜色单元的最小比特数。
示例
向所有能显示颜色的设备应用样式表：
@media all and (color) { ... }
向每个颜色单元至少有4个比特的设备应用样式表：
@media all and (min-color: 4) { ... }
• 颜色索引（color-index）
是否接受 min/max 前缀：是
指定了输出设备中颜色查询表中的条目数量。
示例
向所有使用索引颜色的设备应用样式表，你可以这么做：
@media all and (color-index) { ... }
向所有使用至少256个索引颜色的设备应用样式表：
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
• 宽高比（aspect-ratio）
是否接受 min/max 前缀：是
描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。 示例 下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表。
@media screen and (min-aspect-ratio: 1/1) { ... }
这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。 设备宽高比（device-aspect-ratio） 是否接受 min/max 前缀：是 描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。
示例
下面为宽屏设备选择了一个特殊的样式表。
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
宽高比或者16：9或者16：10。
• 设备高度（device-height）
是否接受 min/max 前缀：是
描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。
示例
向显示在最大宽度800px的屏幕上的文档应用样式表，你可以这样做：
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
• 设备宽度（device-width）
是否接受 min/max 前缀：是
描述了输出设备的宽度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。
• 高度（height）
是否接受 min/max 前缀：是
height 媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度。
注意：用户调整窗口大小后，火狐浏览器会根据使用了width和height属性的媒体查询来切换合适的样式表。
• 方向（orientation）
是否接受 min/max 前缀：否
指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式。
示例
向竖屏设备应用样式表：
@media all and (orientation: portrait) { ... }
• 分辨率（resolution）
是否接受 min/max 前缀：是
指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。
示例
为每英寸至多300点的打印机应用样式：
@media print and (min-resolution: 300dpi) { ... }替换老旧的 (min-device-pixel-ratio: 2)
语法：
@media screen and (min-resolution: 2dppx) { ... }
• 宽度（width）
是否接受 min/max 前缀：是
width 媒体属性描述了输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度。
注意：用户调整窗口大小后，火狐浏览器会根据使用了width和height属性的媒体查询来切换合适的样式表。
示例
如果你想向最小宽度20em的手持设备或屏幕应用样式表，你可以使用这样的查询：
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
这个媒体查询将向最小宽度8.5英寸的打印机应用样式表：
<link rel="stylesheet" media="print and (min-width: 8.5in)" href="http://foo.com/mystyle.css" />
这个查询适用于宽度在500px和800px之间的屏幕：
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
扫一扫
3686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
