响应式布局

布局方式

• 固定宽度布局：主流的宽度有960px/980px/1190px/1210px等。移动端用户需要缩放查看页面内容

• 流式布局：百分比设置相对宽度。在不同设备上都能完整显示。兼容性一般，可能发生错位

• 响应式布局：一套代码自动适配不同终端。检测设备信息，根据设备调整布局。用户体验最好

• 多种方式混合：最常用

响应式布局

实现1：Media Query媒体查询

借助CSS3中的规定，根据不同设备属性完成一系列不同的样式设定

Viewport视口

视口： 显示网页的区域\
约定：

• 布局视口(width) = 设备视觉视口(device-width)

*   完成视口统一，便于进行媒体查询时根据设备视口完成布局

• 不可缩放

约定的完成：\
meta:vp扩展：

&l