资讯专栏INFORMATION COLUMN

CSS 单位 px rem em

CHENGKANG / 2712人阅读

摘要:所以未经调整的浏览器都符合。原因可能是处理汉字时,对于浮点的取值精确度有限。是新增的一个相对单位,根。目前,除了及更早版本外,所有浏览器均已支持。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。

单位转换工具

点我

px

px是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。

特点

IE无法调整那些使用px作为单位的字体大小(缩放)

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

Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)

em

em 指字体高,所有浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

特点

1em指的是一个字体的大小,它会继承父级元素的字体大小,所以不是一个固定的值。任何浏览器的默认字体大小都是16px。所以12px = 0.75em。实际应用中为了方便换算,通常会如下设置样式:

body {
  font-size: 62.5%;
}

这样,1em = 10px。常用的1.2em上就是12px

在中文文章的格式中,每个段落开头都要空出2格,如果用px做单位,对于12px的字体则需要24px,以此类推,但是对于em来说就相对简单了。

p {
  text-indent: 2em;
}
注意点

标签嵌套字体增大

em是想对父元素的font-size属性来决定字高的。那么在多级嵌套下就会出现1.2em * 1.2em = 1.44em的问题出现。如:



我是文字1

我是文字2

在上述例子中"我是文字2"会比"我是文字1"大,因为pfont-size属性是基于1em = 12px的字高去计算自身内部的em值:

/* 1em = 16px -> 计算后 1em = 10px */
body { font-size: 62.5%; }

/* 1em = 10px -> 计算后 1em = 12px */
/* 在container中的字体 都会为12px */
.container { font-size: 1.2em; }

/* 1em = 12px -> 计算后 1em = 14.4px */
/* 在p中的字体 都会为14.4px */
.container p { font-size: 1.2em; }

所以如果想在p中使用同样大小的字,不能设置为1.2em,只能设置为1em

IE中12px的汉字偏大

12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。

该象只发生在12px的汉字,英文不存在此现象。

body {
  font-size: 63%;
}  
rem

rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em的区别在于使用rem相对的是HTML根元素。只要根元素不修改font-size属性,那么rem的想对大小不会变,而em是相对父元素的font-size设置想对大小。

可以避免em字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

p {
  font-size: 14px;
  font-size: .875rem;
}
优点

不会出现像em那样1.2em * 1.2em = 1.44em的情况出现,因为rem是相对htmlfont-size设置,而em是相对父元素font-size



我是文字1

我是文字2

必须设置html的css样式,否则会按照默认的1rem = 16px

缺点

CSS3新增的特性,所以只有支持C3的浏览器才兼容。解决方法低版本浏览器使用px,高版本使用rem。

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

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

相关文章

  • <em>CSSem>单位:<em>pxem>、em、<em>remem>

    摘要:在平时的工作当中,我发现自己大多数时候是用来作为字体单位的,不仅如此,其实公司的所有前端项目都是以作为字体单位的。我们知道像素作为相对长度单位是相对于显示器的分辨率而言的。很好地解决了的字体大小从父元素继承所带来的不便。 px 在平时的工作当中,我发现自己大多数时候是用px来作为CSS字体单位的,不仅如此,其实公司的所有前端项目都是以px作为CSS字体单位的。我们知道px(像素)作为C...

    Lucky_Boy 评论0 收藏0
  • 了解并使用<em>CSSem>中的<em>remem>单位

    摘要:写了一篇文章,里面记录了他在实际使用单位过程中的一些感受。他的解决方式充分利用了到目前为止我们遇到的三种单位。根元素的长度单位依旧采用,模块用单位,模块内的元素使用单位。随后在中单位的强大之处提出了他的观点。 什么是 rem 可能在你使用收音机或者用其他音乐播放器之前,就已经听过R.E.M.这个词了。在这个乐队眼中,这个词是浅睡眠时眼球的快速转动的缩写,而在 css 中,rem 代表着...

    BWrong 评论0 收藏0
  • 彻底弄懂<em>cssem>中单位<em>pxem>和em,<em>remem>的区别

    摘要:是相对长度单位。相对于当前对象内文本的字体尺寸。引自手册特点是新增的一个相对单位,根,这个单位引起了广泛关注。目前,除了及更早版本外,所有浏览器均已支持。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 IE无法调整那些使用px作为单位的字体大小; ...

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

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

    teren 评论0 收藏0
  • 如何更愉快地使用<em>remem> —— 别说你懂<em>CSSem>相对单位

    摘要:值得注意的是,这个设置对使用或其他绝对单位定义的字号大小无效。事实上,提供了一个在和间的相对单位折中解决方案,而且更易于使用。图使用相对单位和继承字号的面板下面是模板,加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其...

    Snailclimb 评论0 收藏0

发表评论

0条评论

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