定義媒體依賴樣式
由于html和css中定義了media query的機(jī)制挤茄，我們可以將樣式限制在某個(gè)具體的媒體中如叼，比如屏幕或是print。
基本的媒體查詢
對(duì)于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">
在樣式內(nèi)部，也可以在import的時(shí)候添加規(guī)則：
@import url(visual.css) screen;
@import url(outloud.css) speech;
@import url(article-print.css) print;
在css中同樣定義了@media語塊囚衔，方便為多個(gè)media設(shè)置樣式：
<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>
復(fù)雜的媒體查詢
<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);
頁面媒體
定義頁面大小
一個(gè)普通的page盒子由兩部分組成：頁面區(qū)域和margin區(qū)域。
image.png
@page {size: 7.5in 10in; margin: 0.5in;}
image.png
image.png
小結(jié)
借助美圖查詢及相關(guān)的特點(diǎn)雕沿，可以自由的為不同的設(shè)計(jì)實(shí)現(xiàn)對(duì)應(yīng)的樣式方案练湿。從設(shè)置不同的顯示大小到重新設(shè)置顏色配置，用戶可以通過設(shè)置達(dá)到最好的效果审轮。
