选择加载CSS

“自适应网页设计”的核心，就是CSS3引入的Media Query（http://www.w3.org/TR/CSS21/media.html）模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

示例1：如果屏幕宽度小于400像素（max-device-width:600px）就加载tinyScreen.css文件

<link rel="stylesheet" type="text/css"
<!-- lang: html -->

<!-- lang: html -->
        media="screen and (max-device-width:400px)"
<!-- lang: html -->

<!-- lang: html -->
        href="smallScreen.css"/>

示例2：如果屏幕宽度在400像素到600像素之间，则加载samllScreem.css文件

<link rel="stylesheet" type="text/css"
<!-- lang: html -->

<!-- lang: html -->
            media="screen and (min-width:400px) and (max-device-width:600px)"
<!-- lang: html -->

<!-- lang: html -->
            href="smallScreen.css"/>

示例3：除了用html标签加载CSS文件，还可以在现有的CSS文件中加载

@import url("tinyScreen.css") screen and (max-device-width:400px);