em和rem笔记

简介

单位

在编写网页过程中需要对元素进行字体，宽高，颜色等的设置，这些需要使用单位。在css中设置字体和宽高使用的单位可以一致，例如：px/em/rem

rem来源

rem是css3中的单位

和px关系

px是使用最多的单位，em与rem可以和px换算

建议

在做移动端项目的时候建议实用rem作为单位，方便实现响应式效果。

em详细说明

em参照父级元素大小font-size:20px,子元素font-size:1em,那么子元素大小为20px。
em合适的使用场景：text-indent（首行缩进）/line-height.

rem详细说明

rem参照的是html标签的字体大小
rem和em不同点：em参照父级元素，如果父级元素没有设置字体大小，则继续向上查找，直至最后。rem直接参照html标签字体大小，并且所有使用rem单位的都是参照html标签
所以只需要设置html标签字体大小，就可以影响全局。
在做响应式网站时，可以根据媒体查询去调节html标签的字体大小实现共同调节其他标签字体大小
使用媒体查询调节html字体大小，效果不够精细（大小是分段调节的），
可以使用js动态计算html的font-size。

使用注意点

在rem使用过程中要时刻注意字体最小12px的问题
设置html的font-size属性时候，最好不要小于12px，

如果设置了10px，使用1rem时，其实是12px，因为最小值是12px。