响应式布局

响应式布局的单位

1.vw和百分比区别

百分比代表相对宽度/高度，问题在于这个值相对什么。就是可以类似于相对定位的概念是相对于父元素的一般来说。而根元素body在没有定义高度的情况下是没有高度的。 而vh、vw不同，永远都是相对于视窗大小的，即便写在font-size里面也是按视窗大小。这个就会有很多很方便的地方了。所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

2.rem和em

em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。em在实际应用的时候因为跟随父元素所以尽量用在部分代码片段中，要不然计算不方便。 建议：如果是跟父元素成倍数关系缩放大小，可选择em为单位；

rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

3.建议