定义媒体依赖样式
由于html和css中定义了media query的机制，我们可以将样式限制在某个具体的媒体中，比如屏幕或是print。
基本的媒体查询
对于html的样式表，都可以通过添加media属性来施加限制。link和style都是一样的：
<link rel="stylesheet" type="text/css" media="print" href="article-print.css">
<style type="text/css" media="speech"> body {font-family: sans-serif;}
</style>
<link rel="stylesheet" type="text/css" media="screen, speech" href="visual.css">
在样式内部，也可以在import的时候添加规则：
@import url(visual.css) screen;
@import url(outloud.css) speech;
@import url(article-print.css) print;
在css中同样定义了@media语块，方便为多个media设置样式：
<style type="text/css">
body {background: white; color: black;} @media screen {
body {font-family: sans-serif;}
h1 {margin-top: 1em;} }
@media print {
body {font-family: serif;}
h1 {margin-top: 2em; border-bottom: 1px solid silver;}
}
</style>
复杂的媒体查询
<link href="print-color.css" type="text/css"
media="print and (color), screen and (color)" rel="stylesheet">
@import url(print-color.css) print and (color), screen and (color);
页面媒体
定义页面大小
一个普通的page盒子由两部分组成：页面区域和margin区域。
image.png
@page {size: 7.5in 10in; margin: 0.5in;}
image.png
image.png
小结
借助美图查询及相关的特点，可以自由的为不同的设计实现对应的样式方案。从设置不同的显示大小到重新设置颜色配置，用户可以通过设置达到最好的效果。
