定義媒體依賴樣式

由于html和css中定義了media query的機(jī)制，我們可以將樣式限制在某個具體的媒體中，比如屏幕或是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">

在樣式內(nèi)部，也可以在import的時候添加規(guī)則：

    @import url(visual.css) screen;
    @import url(outloud.css) speech;
    @import url(article-print.css) print;

在css中同樣定義了@media語塊，方便為多個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);

頁面媒體

定義頁面大小

一個普通的page盒子由兩部分組成：頁面區(qū)域和margin區(qū)域。

image.png

@page {size: 7.5in 10in; margin: 0.5in;}

image.png

image.png

小結(jié)

借助美圖查詢及相關(guān)的特點，可以自由的為不同的設(shè)計實現(xiàn)對應(yīng)的樣式方案。從設(shè)置不同的顯示大小到重新設(shè)置顏色配置，用戶可以通過設(shè)置達(dá)到最好的效果。