响应式设计入门-02媒体查询：支持不同的视口解析.pptVIP

媒体查询：支持不同的视口 本章内容 理解为什么响应式设计需要媒体查询 如何构造CSS3 媒体查询 我们能够检测哪些设备特性 编写第一个CSS3 媒体查询 为特定视口设定CSS 样式 如何在 iOS 和Android 设备上使用媒体查询 媒体查询可以让我们根据设备显示器的特性为其设定CSS 样式。 例如，仅使用几行代码，就可以根据诸如视口宽度、屏幕比例、设备方向（横向或纵向）等特性来改变页面内容的显示方式。 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height 和color（等）。 使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 媒体查询语法 将下面这段代码插入到任意某个CSS 文件的最后，然后预览与之关联的网页： body { background-color: grey; } @media screen and (max-width: 960px) { body { background-color: red; } } @media screen and (max-width: 768px) { body { background-color: orange; } } @media screen and (max-width: 550px) { body { background-color: yellow; } } @media screen and (max-width: 320px) { body { background-color: green; } } 在现代浏览器（如果是IE，至少要IE9）中浏览该网页并不断调整浏览器窗口宽度。页面的背景颜色就会根据当前的视口尺寸而发生变化。 什么是媒体查询 可以将媒体查询想象成对浏览器的提问。如果浏览器回答“是”，则应用某种样式；如果回答是“否”，则不应用该样式。 例如：媒体查询可以问：“你是一块纵向放置的显示屏吗？”对应的实际代码： link rel=stylesheet media=screen and (orientation: portrait) href=portrait-screen.css / 首先，媒体查询表达式询问了媒体类型（你是一块显示屏吗？），然后询问了媒体特性（显示屏是纵向放置的吗？）。 结果是任何纵向放置的显示屏设备都会加载portrait-screen.css样式表，其他设备则会忽略该文件。 在媒体查询的开头追加not 则会颠倒该查询的逻辑。 例如，下面的代码就会颠倒前例中的效果，会使非纵向放置的显示屏设备加载样式文件： link rel=stylesheet media=not screen and (orientation: portrait) href=portraitscreen.css / 也可以将多个表达式组合在一起。如，我们扩展一下前面的例子，限制只有视口宽度大于800 像素的显示屏设备才能加载文件。 link rel=stylesheet media=screen and (orientation: portrait) and (min-width:800px) href=800wide-portrait-screen.css / 更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。全部查询都不为真，则不加载。例子如下： link rel=stylesheet media=screen and (orientation: portrait) and (min-width:800px), projection href=800wide-portrait-screen.css / 这里有两点需要注意。第一，媒体查询之间使用逗号分隔。第二，你会注意到在projection 之后，没有and，也没有任何特性/值的组合。没有后续表达式，意味着只要是projection 就满足条件。 结果是样式会应用于所有的投影仪。 在 CSS 样式表中使用媒体查询(推荐) 可以看出，基于媒体查询可以按条件加载样式。另外，也可以在 CSS 样式表中使用媒体查询。 例如，将下面的代码插入样式表，在屏幕宽度小于等于400 像素的设备上，h1 元素的文字颜色就会变成绿色。 @media screen and (max-device-width: 400px) { h1 { color: green } } 注意写法：以@media开头 @import 指令 还可以使用CSS 的@import 指令在当前样式表中按条件引入其他样式表。例如下面的代码会给视口最大宽度为360 像素的显示屏设备加