一、单位说明

1，目前响应式的单位有四种：px，%，rem，em。

① Px：像素 (计算机屏幕上的一个点)，绝对长度；

② %：百分比；

③ Rem：相对单位,相对于根元素html；

④ Em：相对单位,相对于其所在的父元素，在没有css规则情况下，

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm；

em单位，当设置了font-size属性后，它会逐级向上相乘，所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里，而这个元素又在另一个设置了font-size:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem（根em）。

2，注意事项：

① 先换单位，后改数值；

② 先用外容器设置内边距来统一改边距值，个性设计可单个控件调整；

③ 大间距建议%，小间距建议rem,px。

二、公用单位

公用单位包含：文字大小，行高，左边距，右边距，icon大小，外边距，内边距

1，文字大小：建议rem

2，左边距/右边距：建议优先rem

3，Icon大小：建议rem

4，外边距：建议左右%，建议上下rem

5，内边距：建议%

6，行高：建议%，120~150%

三、控件单位

1，组件

外边距：上和下；

内边距：左边距和右边距用的多，一般是用于页面的布局，用%。

2，导航

导航间距大的话建议开启栏目等宽，间距小的话建议关闭栏目等宽，设置列间距

单位：rem/em；

上下内间距：建议rem；

左右内间距：建议em。

3，按钮

最大宽度：建议rem；

上下内边距：建议 px ；

左右内间距：小间距 建议 rem；大间距建议%。

4，表单/列表

行间距/列间距：建议rem；

内间距：建议px/rem。

5，多语言，社交

上下内边距：rem；

左右内边距：rem；

列间距：%，rem。

6，搜索

文本框：内边距：px；

             外边距：rem；

按钮：同按钮控件即可。