响应式布局（Responsive Layout）/流式布局（Fluid Layout）/自适应布局（Adaptive）

1.使用媒体查询来适应不同视口的固定宽度设计，例如bootstrap的container类。

2.将固定像素布局转换成灵活的百分比布局，才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式。

3.目标元素宽度 / 上下文元素宽度 = 百分比宽度

4.响应式的文字，使用百分比和em，em的实际大小是相对于其上下文的字体大小而言的，目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸

font-size:100%;
font-size:16px;
font-size:1em;

5.弹性图片，去掉图片的width,height属性，指定max-width:100%可使图片自动缩放到与其容器100%匹配，此样式可应用在其他多媒体标签上。

img, object, video, embed{
max-width:100%;
}

6.超级全能max-width属性：另一种限制页面无限扩张的方法是给最外层div设置max-width属性。

7.为不同的屏幕尺寸提供不同的图片，尝试为较小的屏幕尺寸提供较小的图片。