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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效