响应式布局

响应式布局的单位

1.vw和百分比区别

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

2.rem和em

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

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

p {font-size:14px; font-size:0.125rem;}

3.建议

1. 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。因此为了浏览器的兼容性，可“px”和“rem”一起使用，用”px”来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
2. px 与 rem 的选择？
   对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
   对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。