自适应网页设计(Responsive) - 选择加载CSS

"自适应网页设计"的核心,就是CSS3引入的Media Query模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

除了用html标签加载CSS文件,还可以在现有CSS文件中加载。@import url("tinyScreen.css") screen and (max-device-width: 400px);