响应式布局如何实现

响应式布局实现有以下几种

1. 百分比布局
   利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的
   
2. 使用媒体查询 (CSS3 @media 查询)
   

利用媒体查询设置不同分辨率下的css 样式，来适配不同屏幕，三个不同分辨率下显示对应的背景色。
媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式；分辨率拆分可视项目具体情况而定。
注意：IE6、7、8 不支持媒体查询。
3. rem 响应式布局

当前页面中元素的rem 单位的样式值都是针对于html 元素的font-size 的值进行动态计算的，所以有两种方法可以达到适配不同屏幕：
第一种利用媒体查询，在不同分辨率下给 html 的 font-size 赋值。第二种利用 js 动态计算赋值，缺点就是打开页面时候，元素大小会有一个变化过程。

4. vw 响应式布局
   
   根据 PSD 文件宽度或高度作为标准，元素单位 px 转换为 vw 或 vh，比如font-size: 12px，PSD 文件宽度 375，转换公式 12 * 100 / 375，则样式改为font-size: 3.2vw，下面是我经常使用的工具，有利于提高转换效率。现阶段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致， 也不用写多套样式。

5. flex 弹性布局
   
   利用 flex 属性来适配不同屏幕，上图利用简单的属性实现栏目响应式