CSS媒体查询详细解读
一 CSS媒体查询使用的背景：
现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。
二 响应式设计：
响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。
例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的 智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是可用的 UI 组件。
有了媒体查询，你就可以编写 CSS，自动将设计更改为提供不同屏幕大小的最佳 UI 体验。
三 什么是媒体查询？：
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
四 媒体查询基本语法：
媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。
<!-- 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，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，能够更灵活地对特定的设计场景使用自定义的显示规则。媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。样式表中的媒体查询看起来如下图中的示例所示。
@media all and (min-width: 800px) { ... }根据上面例子的标记，所有最小水平屏幕宽度为 800 像素的屏幕（屏幕和打印等）都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询：
@media all是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。(min-width:800px)是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。
五 媒体类型：
可以省略，默认为all
all:用于所有设备.
print:用于打印机和打印预览.
screen:用于电脑屏幕,平板电脑,手机屏幕等.
speech:用于屏幕阅读器等发声设备.
六 逻辑操作符：
你可以使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。not操作符用来对一条媒体查询的结果进行取反。only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。
你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。
and
and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的all媒体类型，可能像这样子：
@media (min-width: 700px) { ... }如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：
(min-width: 700px) and (orientation: landscape) { ... }现在上面的媒体查询仅在可视区域宽度不小于700像素并在横屏时有效。如果，你仅想在电视媒体上应用，你可以使用 and 操作符合并媒体属性：
@media tv and (min-width: 700px) and (orientation: landscape) { ... }现在，上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。
and 关键词的反义词是 or 关键词。和 and 一样，这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True，那么整个表达式或分离的两个条件都会为 True。
or 关键词
|
1 |
|
如果宽度至少是 800 像素或方向是纵向的，则会应用该规则。
逗号分隔列表
媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：
@media (min-width: 700px), handheld and (orientation: landscape) { ... }如上文，如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。
not
not 关键字应用于整个媒体查询，在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中not仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。例如，not在下面的查询中最后被计算：
@media not all and (monochrome) { ... }
等价于：
@media not (all and (monochrome)) { ... }
而不是：
@media (not all) and (monochrome) { ... }另一个例子，看下面的媒体查询：
@media not screen and (color), print and (color)
等价于：
@media (not (screen and (color))), print and (color)only
only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：
<link rel="stylesheet" media="only screen and (color)" href="example.css" />七 媒体特征：
大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”。例如，max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px，大于12450px则不满足条件，不会应用此样式。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值，并且该特性的实际值不为零，则该表达式被解析为真。
注意：如果浏览器运行的设备上没有该属性值，包含这个属性值的表达式一般返回假。例如，在语音合成器上查询屏幕长宽比总是返回假。
颜色（color）
值： <color>
媒体： media/visual
是否接受 min/max 前缀：是
指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。
注意：如果每个颜色单元具有不同数量的比特值，则使用最小的。例如，如果显示器为蓝色和红色提供5比特，而为绿色提供6比特，则认为每个颜色单元有5比特。如果设备使用索引颜色，则使用颜色表中颜色单元的最小比特数。
示例
向所有能显示颜色的设备应用样式表：
@media all and (color) { ... }
向每个颜色单元至少有4个比特的设备应用样式表：
@media all and (min-color: 4) { ... }
颜色索引（color-index）
值：<integer>
媒体： media/visual
是否接受 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）
值：<ratio>
媒体： media/visual, media/tactile
是否接受 min/max 前缀：是
描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。
示例
下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表。
@media screen and (min-aspect-ratio: 1/1) { ... }这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。
设备宽高比（device-aspect-ratio）
值：<ratio>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是
描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。
示例
下面为宽屏设备选择了一个特殊的样式表。
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }宽高比或者16：9或者16：10。
设备高度（device-height）
值：<length>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是
描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。
设备宽度（device-width）
值：<length>
媒体： media/visual, media/tactile
是否接受 min/max 前缀：是
描述了输出设备的宽度（整个屏幕或页的宽度，而不是仅仅像文档窗口一样的渲染区域）。
示例
向显示在最大宽度800px的屏幕上的文档应用样式表，你可以这样做：
<link rel="stylesheet" media="screen and (max-device-width: 800px)" />网格（grid）
值：<integer>
媒体：all
是否接受 min/max 前缀： 否
判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。
示例
向一个15字符宽度或更窄的手持设备应用样式：
@media handheld and (grid) and (max-width: 15em) { ... }
注意：“em” 在网格设备中有不同的意义；一个“em”的实际宽度不得而知，假设1em相当于一个网格单元的宽高。
高度（height）
值：<length>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是
height 媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度。
注意：用户调整窗口大小后，火狐浏览器会根据使用了width和height属性的媒体查询来切换合适的样式表。
黑白（monochrome）
值：<integer>
媒体： media/visual
是否接受 min/max 前缀：是
指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。
示例
向所有黑白设备应用样式表：
@media all and (monochrome) { ... }
向每个像素至少8比特的黑白设备应用样式表：
@media all and (min-monochrome: 8) { ... }
方向（orientation）
值：landscape | portrait
媒体：media/visual
是否接受 min/max 前缀：否
指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式。
示例
向竖屏设备应用样式表：
@media all and (orientation: portrait) { ... }分辨率（resolution）
值： <resolution>
媒体： bitmap
是否接受 min/max 前缀：是
指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。
示例
为每英寸至多300点的打印机应用样式：
@media print and (min-resolution: 300dpi) { ... }
替换老旧的 (min-device-pixel-ratio: 2) 语法：
@media screen and (min-resolution: 2dppx) { ... }扫描（scan）
值： progressive | interlace
媒体：media/tv
是否接受 min/max 前缀：否
描述了电视输出设备的扫描过程。
示例
向以顺序方式扫描的电视机上应用样式表：
@media tv and (scan: progressive) { ... }
宽度（width）
值： <length>
媒体： media/visual, media/tactile
是否接受 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) { ... }总结：
媒体特性:
可以看做是判断条件+css.
判断条件:and only not
width:表示页面的宽度。如果是在移动设备上，width表示的是布局视口的宽度。
height:表示页面的高度。
device-width:表示的是设备的宽度，即屏幕的宽度。
device-height:表示的是设备的高度，即屏幕的高度。
resolution:定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
max-width:定义输出设备中的页面最大可见区域宽度。
max-height:定义输出设备中的页面最大可见区域高度。
max-device-width:定义输出设备的屏幕最大可见宽度。
max-device-height :定义输出设备的屏幕可见的最大高度。
max-resolution:定义设备的最大分辨率。
min-width:定义输出设备中的页面最小可见区域宽度。
min-height:定义输出设备中的页面最小可见区域高度。
min-resolution:定义设备的最小分辨率。
min-device-width:定义输出设备的屏幕最小可见宽度。
min-device-height:定义输出设备的屏幕的最小可见高度。
orientation: portrait//竖屏
orientation: landscape//横屏
//CSS2
<link rel="stylesheet" media="screen and (min-width:1024px)" type="text/css" href="style.css">
//CSS3
@media screen and (min-width:1024px) and (max-width:1800px) { div{color:red;}
}
八 常见媒体查询
因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。
如果目标是横向模式智能手机，则使用： @media (min-width: 321px) { ... }
如果目标是纵向模式智能手机，则使用： @media (max-width: 320px) { ... }
如果目标是横向模式 Apple iPad，则使用： @media (orientation: landscape) { ... }
如果目标是纵向模式 iPad，则使用： @media (orientation: portrait) { ... }
iPad 上使用的是 orientation 媒体特性，而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持 orientation 媒体特性。必须使用 width 模拟这些方向断点。
九 兼容移动设备:
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
content属性值:
width:设置viewport 的宽度，为一个正整数，或字符串”device-width”.
width = device-width：宽度等于当前设备的宽度
initial-scale:设置页面的初始缩放值，默认设置为1.0,为一个数字，可以带小数
minimum-scale:允许用户的最小缩放值，默认设置为1.0,为一个数字，可以带小数
maximum-scale:允许用户的最大缩放值，默认设置为1.0,为一个数字，可以带小数
height:设置viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable:是否允许用户进行缩放，默认设置为no, no 代表不允许，yes代表允许
//兼容移动设备
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
十一 兼容IE:
因为IE8既不支持HTML5也不支持CSS3 Media，所以需要加载两个JS文件，来保证代码实现兼容效果.
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8,为了防止这种情况，需要让IE的文档模式永远都是最新的.
chrome=1;如果有的用户电脑里面装了chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使Webkit引擎及V8引擎进行排版及运算.
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">十二 浏览器支持：
到现在为止，我们可能已经相信 CSS 媒体查询是一个强大的工具，而且想知道哪些浏览器支持 CSS 媒体查询。以下是这方面的好消息和坏消息。
- 好消息是：大多数现代浏览器（包括智能手机上的浏览器）都支持 CSS 媒体查询。
- 坏消息是：最近，来自 Redmond 的 Windows® Internet Explorer® 8 浏览器不支持媒体查询。
对于大多数专业 Web 开发人员来说，这意味着需要提供一个解决方案，以便在 Internet Explorer 中支持媒体查询。
下列解决方案是一个名为 respond.js 的 JavaScript polyfill。
带有 respond.js 的 Polyfill
Respond.js 是一个极小的增强 Web 浏览器的 JavaScript 库，使得原本不支持 CSS 媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与 CSS 中媒体查询匹配的样式。最终结果是，能够在原本不支持的浏览器上运行媒体查询。
由于这是一个基于 JavaScript 的解决方案，所以浏览器需要支持 JavaScript，以便运行脚本。该脚本只支持创建响应式设计所需的最小和最大 width 媒体查询。这并不是适用于所有可能 CSS 媒体查询的一个替代。
Respond.js 是可以选择的诸多可用开源媒体查询 polyfills 之一。
十三 响应式网页开发中的宽度问题：
在实际开发中，通常需要设置响应式网页宽度的最大值，一旦忽略最大宽度，臃肿或零散的网页布局都会造成视觉洪灾，也就是我们常说的看起来很low。
另外谈谈目前显示设备中的网页宽度问题（由于篇幅问题，就不从工业革命开始扯了），目前最为常见的宽度基本上都是：大于或等于960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之间的平板端（768px、640px）以及640px以下的手机端（480px、320px），以上宽度存在已久，且显示设备中的网页宽度会长期处于这样的状态下，在响应式网页宽度设计上，基本从这几个尺寸考虑就已经足够。
十四 .media媒体查询所有参数汇总：
媒体查询器中还包含并不常用的相关功能，悉如示下：
width:浏览器可视宽度，
height:浏览器可视高度，
device-width:设备屏幕的宽度，
device-height:设备屏幕的高度，
orientation:检测设备目前处于横向还是纵向状态，
aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，
device-aspect-ratio:检测设备的宽度和高度的比例，
color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），
color-index:检查设备颜色索引表中的颜色（他的值不能是负数），
monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），
resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，
grid：检测输出的设备是网格的还是位图设备。
十五.扩展——在CSS2中同样有媒体查询：
media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：
在HTML文件中的<head></head>标签中写入这句：
<link rel="stylesheet"type="text/css" media="screen"href="style.css">以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，
如要判断移动设备是否为纵向放置的显示屏，可以这样写：
<link rel="stylesheet" type="text/css"media="screen and (orientation:portrait)"href="style.css">如要让小于960px的页面执行指定的CSS样式文件，可以这样写：
<link rel="stylesheet"type="text/css" media="screen and (max-width:960px)"href="style.css">当然，CSS2中的媒体查询方法放到现在并不推荐使用，最大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。
CSS媒体查询详细解读相关推荐
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- css媒体查询（手机、平板、PC）
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
- css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...
- CSS媒体查询：最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
- media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖？
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...
最新文章
- 计算机网络:单播,多播
- 如何使用自定义端口运行 Flutter Web
- 【机器学习】交通数据的时间序列分析和预测实战
- 8.Vue 事件处理
- scala语言的底层是java实现的_2020了，每个程序员都该学习的 5 种开发语言
- MapReduce综合学习含Wordcount案例
- close wait 过多原因_time_wait 详解和解决方案
- Inside ASP.NET 2.0-即时编译系统
- 将一张100元按如下要求C语言,aoa三一宝典(计算机二级考试)
- 不同系统的Single Sign On（单点登录）
- 1909升级卡64_Win10专业版下载_1909 版64位(2019年11月更新)
- 极化的概念及天线极化方式
- 多机器人系统仿真平台(摘要与目录)
- 系统集成项目管理工程师英语词汇
- 自定义SpringBoot程序启动图标
- CentOS 7.0.1503
- 工作和生活中，...
- 计算机考证编程类证书
- addEventListener和attachEvent的区别
- Win10系统安装详细说明