先来看看一些典型的响应式布局方案：传统布局，px为单位相对单位布局通过媒体查询实现响应式布局基于Rem的灵活布局flex\grid使用javaScript实现布局实现灵活响应式布局，尤其是移动端为了适配不同的屏幕，我们需要选择侵入性小、实现简单的布局方案。一般采用相对单元布置。下面简单了解一下相对布局，如何使用，它是相对于谁的（1）emem是相对于当前元素或者继承当前元素的字体宽度。Ems并不总是相对于父元素的字体大小，实际上“相对于谁”取决于应用的CSS属性。例如，在行高属性中，em是相对于自身的字体大小。(2)rem是相对于根节点html元素的字体大小。淘宝和网易的自适应布局方案都是基于rem的，但是又各不相同。在网易方案中，包括font-size在内的属性都是rem。在淘宝方案中，会在body元素中添加默认字体大小12px。(3)vwvw是相对于视口宽度，100vw等于视口宽度，vh与vw相同，100vh等于视口高度。(4)%%的相对对象比较复杂，它的对象在不同的??属性上是不同的。例如：position:absolute中，元素的left\top以%为单位，这里的%是相对于参照物的，比如left是相对于父元素的宽度，top是相对于父元素。position:relative，虽然元素有自己的原始位置，但也可以用left\top等以%为单位表示相对于原始位置的便宜度，left相对于自身的宽度，高度相对于自身的顶部。position:fixed,nothing毫无疑问，一个元素的left\top是以%为单位的，它是相对于整个viewport的margin\padding，%是相对于父元素的widthborder-radius，%是相对于它自己的宽度和高度background-size。%在font-size中是相对于自身的宽高，%是在line-height中是相对于父元素的字体大小，%是相对于自身的字体大小（5）calc响应式布局计算单元，这使得CSS有计算能力
