美文网首页
前端css px、em、rem三者的联系与区别

前端css px、em、rem三者的联系与区别

作者: wangdemo | 来源:发表于2021-08-13 11:26 被阅读0次

1、px像素,相对长度单位。像素px是相对显示器屏幕分辨率而言的。用于元素的边框或者定位。

2、em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置,则相对浏览器的默认字体尺寸。
3、rem是css3新增的一个相对单位(root ),rem相对于html根元素,这个单位可谓是集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例的调整所有的字体大小,又可以避免字体大小逐层复合的连锁反应。目前基本上市面上主流的的浏览器都是支持的。对于不支持它的浏览器,应对的方法也很简单,就是对多写绝对单位。

总结:
1、px、em、rem、都是计量单位,都能表示尺寸。px为“绝对尺寸”,也并非真正的绝对。
2、em、rem这两者都是相对尺寸,但两者的相对的对象不同,前者相对于父元素的字体尺寸,后者相对于根元素的字体尺寸。
3、em和rem单位字体的大小是不固定,都是通过字体大小计算得到的像素值。所以两者多用于响应式布局。

下面提供一张em和rem在不同环境下换算成px的图片供大家参考: em、rem换算px表

注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

相关文章

  • rem与em区别

    响应式Web设计—px-em-rem三者区别及rem的使用在css中单位长度用的最多的是px、em、rem,这三个...

  • 前端css px、em、rem三者的联系与区别

    1、px像素,相对长度单位。像素px是相对显示器屏幕分辨率而言的。用于元素的边框或者定位。 2、em是相对长度单位...

  • 2019-08-29

    px、rem、em的区别 随着css学习的不断深入页面也随之丰富,那么em、rem、px是我们在页面布局中经常会用...

  • rem,px,em单位区别

    rem,px,em单位区别

  • px, em, rem 的区别和使用场景

    区别 CSS 中,目前我们常用到的长度单位有 px, em, rem。 绝对长度单位px(pixel 像素): 相...

  • CSS之px、em、rem三者的联系与区别

    px、em、rem都是计量单位,都能表示尺寸,但是有有所不同,而且其各有各的优缺点。px表示“绝对尺寸”(并非真正...

  • 2020-01-05

    彻底弄懂css中单位px和em,rem的区别 https://www.cnblogs.com/leejersey/...

  • em与rem区别 em与px转换

    em与rem区别 em与px转换 em与px转换 一般浏览器默认1em=16px,通过设置font-size大小来...

  • em、rem、px区别

    css中如何区分em、rem、px? 随着css学习的不断深入页面也随之丰富,那么em、rem、px是我们在页面布...

  • 响应式Web 设计—px-em-rem三者区别及rem的使用

    px—em—rem三者的区别 PX px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。...

网友评论

      本文标题:前端css px、em、rem三者的联系与区别

      本文链接:https://www.haomeiwen.com/subject/coplbltx.html