CSS的px,em,rem

一、px,em,rem是什么？

px：像素，它是长度的相对单位，它是相对于与屏幕的分辨率而言的
em：是相对长度单位，相对参照物为父元素的font-size，em具有继承的特点，当没有设置font-size时，则会继承浏览器的默认设置1em = 16px
rem: 相对参照物是根元素html，且是不变的，由于参照物的不变，所以比较好计算，当没有设置font-size时，浏览器会采用默认的16px

二、改变字体的大小

对于px来说，只要考虑自身的大小就行，需要多少直接设置就行

而对于em来说，要通过父元素的大小来计算得出，当整个网页字体需要统一变大变小的时候只需要改变body里面的font-size的值就行

1.2em = 父级字体的大小 * 1.2

对于rem来说，为了方便计算起见，可以把默认字体的大小设置为font-size: 62.5%或者font-size: 10px

比如说现在需要设置p的字体大小为30px，则可以先设置html{font-size: 62.5%}（则就说明此时1rem=10px），那么可以计算出30/10=3rem，然后设置p{font-size: 3rem}

三、选择合适的单位

1. 对于只需要适配少部分的手机设备，且分辨率对页面影响不大的，使用px即可
2. 对于需要适配各种移动设备，使用rem，当然rem是存在兼容性的，所以可以这样写p{font-size: 30px; font-size: 3rem}