定义媒体依赖样式

由于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

---

小结

借助美图查询及相关的特点，可以自由的为不同的设计实现对应的样式方案。从设置不同的显示大小到重新设置颜色配置，用户可以通过设置达到最好的效果。