px,rem,em的区别

我们来分别介绍一下px,rem,em

• px
  大家对px肯定都相对的比较熟悉了。px是固定的单位，是相对于屏幕分辨率而言的。1px=1像素。一般来说我们会把字体大小设为12px14px.使用px可以百分百还原设计稿，这样控制起来更加精确。

但是在响应式布局中，更多的是使用相对距离，而且很多东西，会随着屏幕的大小改变而改变，设计稿存在伸缩性，在响应式布局中大多使用rem,em这种相对单位

• em (相对的长度单位)
  
  1. em的相对参照物为父元素的font-size
  2. em具有继承的特点
  3. 当父级元素没有设置font-size时，浏览器会有一个默认的em设置，1em=16px，

缺点：带来混乱。因为em依赖父元素的font-size,但父元素的长度单位不一定都一样。

• rem (相对的长度单位)

  1. 相对参照物为根元素html,相对参照物固定不变，同样的1rem=16px.
  2. 当父级元素没有设置font-size时，浏览器会有一个默认的rem设置，1rem=16px，
  3. 当根元素html的font-size设置为font-size:62.5%,这个时候，1rem=10px,方便我们在html中单位的换算。同样，当font-size：100%时，1rem=16px

  当我们想改变整个页面的字体的大小的时候，我们只需要改一个地方，就可以改动整个页面字体的大小（牵一发而动全身），使用px就要一个一个的去改，才能调整整个页面的字体大小

rem对于一些主流浏览器的兼容性还是比较好的，一些版本比较低的ie浏览器不支持，具体的大家可以在这个网站搜索一下，https://caniuse.com