面试题——响应式布局如何实现

1、什么是响应式布局

响应式网页设计（RWD）是一种新的网站设计模式，从此构建的网站可自动适应不同的访问设备（从桌面电脑，平板电脑到只能手机），方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。
（简写：响应式布局可以让网页同时适配不同分辨率和不同手机端，让客户有更好的体验）

方案一：百分比布局

l利用对属性设置白扥比来适配不同屏幕，注意这里的百分比是相对于父元素的；
能设置的属性有 width ,heigth,padding,margin ,其他属性比如border,font-size 不能用百分比设置的，先看一个简单例子：

.wrapper . left{
	width:50%;
}
.wrapper . right{
	width:50%;
}
.tabBox{
	margin-top:20px;
}

顶部是利用设置图片 width: 50%来适应不同的分辨率，由于原始图片高度不同，所以第一张图片顶部会有空白，这种情况最好两张图片宽高保持一致，如果使用强制高度统一，会导致图片变形；

注意：当屏幕大于图片的宽度时，会进行拉伸；解决拉伸方法就是改为max-width: 50%，但当屏幕大于图片的宽度时，两边会有空白。
栏目是利用设置单栏目 width: 25%来适应不同的分辨率。
由于没办法对 font-size 进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。

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

利用媒体查询设置不同分辨率下的css 样式，来适配不同屏幕，先看一个简单例子：

利用媒体查询设置不同分辨率下的css 样式，来适配不同屏幕，先看一个简单例子：
三个不同分辨率下显示对应的背景色。

媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式；分辨率拆分可视项目具体情况而定。
注意：IE6、7、8 不支持媒体查询。

方案三.rem 响应式布局

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

方案四.vw 响应式布局

根据 PSD 文件宽度或高度作为标准，元素单位 px 转换为 vw 或 vh，比如font-size: 12px，PSD 文件宽度 375，转换公式 12 * 100 / 375，则样式改为font-size: 3.2vw，下面是我经常使用的工具，有利于提高转换效率。

现阶段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致， 也不用写多套样式。

方案五.flex 弹性布局

利用 flex 属性来适配不同屏幕，下图利用简单的属性实现栏目响应式