自适应网页排版设计 第1篇
“自适应网页设计”的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载文件。
如果屏幕宽度在400像素到600像素之间，则加载文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
自适应网页排版设计 第2篇
2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
自适应网页排版设计 第3篇
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码：
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
老版本的IE不支持max-width，所以只好写成：
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
或者，Ethan Marcotte的。
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。