彻底弄懂css中单位px和em,rem的区别

saucxs 发布于2019-08-29 12:25 / 2827人阅读

摘要：是相对长度单位。相对于当前对象内文本的字体尺寸。引自手册特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

PX特点

IE无法调整那些使用px作为单位的字体大小；

国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

EM特点

em的值并不是固定的；

em会继承父级元素的字体大小。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

rem特点
rem是css3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
下面就是一个例子：p {font-size:14px; font-size:.875rem;}

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

在这里为大家提供一个px,em,rem单位转换工具地址：http://pxtoem.com/

GPU云服务器云服务器应用的是rem单位 px2rem css和html的区别 html和css的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111886.html

深入理解CSSem>中em, rem, ex区别，及使用技巧

摘要：中常见尺寸单位描述百分比英寸厘米毫米一个是一个字体的。在中，是非常有用的单位，因为它可以自动适应用户所使用的字体。在中唯一例外的是属性，它的和值指的是相对父元素的字体大小。 CSS 中常见尺寸单位描述 % 百分比 in 英寸 cm 厘米 mm 毫米 ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) pt ...

lbool 2019-08-29 16:44 评论0 收藏0
CSSem>3 border-image 彻底明白

摘要：用于给边框贴上背景图像类似于中的背景属性。重复性取值为重复只是其中之一，其余两个是平铺和拉伸。其中，是默认值。例如表示水平方向平铺，垂直方向重复。不进行拉伸，不凑整。效果如下白框为部分资料来源网络亲们，看懂没不懂请留言，帮你解答。。 border-image用于给border（边框）贴上背景图像类似于CSS中的background（背景）属性。例如：background:url...

chenjiang3 2019-08-20 19:07 评论0 收藏0
CSSem>3 border-image 彻底明白

摘要：用于给边框贴上背景图像类似于中的背景属性。重复性取值为重复只是其中之一，其余两个是平铺和拉伸。其中，是默认值。例如表示水平方向平铺，垂直方向重复。不进行拉伸，不凑整。效果如下白框为部分资料来源网络亲们，看懂没不懂请留言，帮你解答。。 border-image用于给border（边框）贴上背景图像类似于CSS中的background（背景）属性。例如：background:url...

songjz 2019-08-29 13:19 评论0 收藏0
别再被各种单位迷惑：pxem>/em/rem

摘要：引自手册是相对长度单位。所有未经调整的浏览器都符合。特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。在他处看到一篇好文章，想记录在自己的学习笔记中，原文作者看到我转载若是介意，联系我立马就删除，附上原文链接：http://www.huolg.net/html5/htm...

teren 2019-08-28 18:26 评论0 收藏0
pxem>、em和rem实战经验

摘要：前言在自适应布局或者移动端网页开发时，我们经常会用到和两个长度单位。，相对长度单位。相对于当前对象内文本的字体尺寸。所有未经调整的浏览器中都是。最大的优点是提供一致尺寸，便于计算。为了还原设计稿和实现合理的布局所以需要根元素重写。前言在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。区别 ...

xietao3 2019-08-30 15:54 评论0 收藏0