px、em、rem和%的区别与总结

px这个单位用的非常多,相信大家都很熟悉。px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率的最小分割。由于它是固定大小的单位,单独用它来设计的网页,如果适应大屏幕(电脑),在小屏幕(手机)上就会很不友好,做不到自适应的效果。

  1. px是固定长度单位,不随其它元素的变化而变化
  2. em和%是相对于父级元素的单位,会随父级元素的属性(font-size或其它属性)变化而变化
  3. rem是相对于根目录(HTML元素)的,所有它会随HTML元素的属性(font-size)变化而变化
  4. px和%用的比较广泛一些,可以充当更多属性的单位,而em和rem是字体大小的单位,用于充当font-size属性的单位
  5. 一般来说:1em = 1rem = 100% = 16 px

猜你喜欢

转载自www.cnblogs.com/dingboyang/p/10990639.html