但这样太繁琐，要写多套代码
百分比#
css中的子元素中的百分比（%）到底是谁的百分比？
子元素width或height的百分比是父元素width或height的百分比
top、bottom的百分比是相对于(默认定位)父元素的height
left、right的百分比是相对于(默认定位)父元素的width
padding、margin不论是垂直方向或者是水平方向，都相对于直接父元素的width
border-radius、translate、background-size的百分比，则是相对于自身的width
百分比单位布局应用
使用padding-top来填充高度,来实现宽高自适应
百分比单位缺点
计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
百分比布局不全是相对于父元素的单位,而且父元素的单位也不是唯一的
rem解决方案#
只相对于根元素(html)的font-size大小来决定
rem：相对长度单位。相对于根元素(即html元素)font-size值的倍数。
rem的用法#
当html元素的font-size为12px时,1rem=12px;
一、自行换算rem#
比如给定的视觉稿为750px（物理即拼商城），如果我们要将所有的布局单位都用rem来表示，一种比较笨的办法就是对所有的height和width等元素，乘以相应的比例，现将视觉稿换算成rem单位，然后一个个的用rem来表示。
如果我们需要实现设备的自适应,只需要使用js监听设备的大小,动态改变font-size即可.
二、px2rem#
表示的是从px转化为rem。
另一种比较方便的解决方法就是，在css中我们还是用px来表示元素的大小，最后编写完css代码之后，将css文件中的所有px单位，转化成rem单位。
px2rem的原理也很简单，重点在于预处理以px为单位的css文件，处理后将所有的px变成rem单位。可以通过两种方式来实现
