px、em和rem的区别

  • px:像素。是一个确定的长度单位,设置字体大小为20px,则表示字体大小为固定的值。
  • em和rem都是相对单位,em和rem的值都不是固定的。em是相对于父级元素的大小倍数,例如2em表示设置为父级的2倍大小;rem是相对根元素的大小倍数。
    举例说明
em.jpg

如上图代码所示,用html{}定义了根元素大小为15px。

  • 第一个段落中的文字“我是1em”是根元素大小的1倍,即为15px。
  • 第二个段落文字没有设置文字格式,直接采用head中设置的body{}格式,为2em,父级的两倍大小,body的父级就是html,所以是html的两倍,也就是30px,所以“我是2em”显示为30像素。
  • 第三个段落设置字体大小为2em,即为父级body的两倍,而body又是html的两倍,所以这一个段落中的文字大小为2*2*15px=60px
  • 第四个段落设置字体大小格式为2rem,即直接是根元素大小的2倍,所以为2*15px=30px。
  • 第五个段落设置字体大小为16px,是一个确定的值,所以显示出来的字体大小直接就是16px。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • 作者:HelKyle链接:http://www.w3cplus.com/css/when-to-use-em-vs...
    红叶丶秋鸣阅读 3,340评论 0 3
  • 概念介绍 px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长...
    柯琦阅读 2,091评论 0 7
  • ·##概念介绍:1.px(pixel,像素):是一个虚拟长度单位,是计算机系统的数字化长度单位,如果px要换算成物...
    小时候很帅的龙少阅读 2,163评论 0 6
  • 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点1...
    xixihaha520阅读 549评论 0 0