响应式布局实现方案

响应式布局是什么？

响应式布局就是 同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕（也可以说是 一套代码实现多种设备访问一致性(pc、平板、手机) ）。 ie8及其以下不兼容。

如何实现响应式布局？

方案一：百分比布局

    利用对属性设置百分比来适配不同屏幕， 百分比是相对于父容器。 能够设置的属性有：padding、margin、width、height。

    注意：当屏幕大于图片的宽度时，会进行拉伸；解决拉伸方法就是改为max-width: 50%，但当屏幕大于图片的宽度时，两边会有空白。栏目是利用设置单栏目 width: 25%来适应不同的分辨率。

方案二：使用 媒体查询 (CSS3 @media 查询)

    根据媒体查询设置不同分辨率下的css样式，来适配不同屏幕。

    @media的语法格式：

    //例如设备小于700像素....<