资讯专栏INFORMATION COLUMN

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

saucxs / 2716人阅读

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

国内的设计师大都喜欢用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/

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

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

相关文章

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

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

    lbool 评论0 收藏0
  • <em>CSSem>3 border-image 彻底明白

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

    chenjiang3 评论0 收藏0
  • <em>CSSem>3 border-image 彻底明白

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

    songjz 评论0 收藏0
  • 别再被各种单位迷惑:<em>pxem>/em/rem

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

    teren 评论0 收藏0
  • <em>pxem>、emrem实战经验

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

    xietao3 评论0 收藏0

发表评论

0条评论

saucxs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<