web前端之CSS设计指南四：响应式布局说明

web前端之CSS设计指南四：响应式布局说明

响应式设计包含三个重要的方面。
媒体查询：是一种 CSS 语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS 规则；
流式布局：是使用 em 或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放；
弹性图片：是使用相对单位确保图片再大也不会超过其容器。

媒体查询：
1.@media规则

@media print{
    nav{
        display:none;
    }
}

如果当前页面要打印，那么就不显示 nav 元素。

@media screen and (max-width:568px) {
.column {float:none; width:96%; margin:0 auto;}
}

all：匹配所有设备；
handled：匹配手持设备（小屏幕、单色、带宽有限）；
print：匹配分页媒体或打印预览模式下的屏幕；
screen：匹配彩色计算机屏幕；
其他媒体类型还有 braille（盲文点字触觉反馈设备）、 embossed（盲文分页打印机）、projection（投影仪）、 speech（语音合成器）、 tty（电话机屏幕等固定宽度字符栅格设备）和 tv（电视机）。

min-device-width 和 max-device-width：匹配设备屏幕的尺寸；
min-width 和 max-width：匹配视口的宽度，例如浏览器窗口宽度；
orientation（值为 portrait 和 landscape）：匹配设备是横屏还是竖屏。
如果想通过媒体查询来根据用户对浏览器窗口的缩放重新调整布局，应该使用 min-width 和max-width。

当屏幕为568px的时候调用iphone_styles.css

<link type="text/css" media="screen and (max-width:568px)" href="css/iphone_styles.css" />

补充说明