CSS 单位 px rem em

CHENGKANG 发布于2019-08-29 13:08 / 2605人阅读

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

单位转换工具

点我

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

特点

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

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

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

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"大，因为p的font-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是相对html的font-size设置，而em是相对父元素的font-size




  
  我是文字1
  我是文字2

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

缺点

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

私有云专线服务 px2rem rem单位应用的是rem单位 px

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

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

CSSem>单位：pxem>、em、remem>

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

Lucky_Boy 2019-08-29 12:22 评论0 收藏0
了解并使用CSSem>中的remem>单位

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

BWrong 2019-08-29 11:32 评论0 收藏0
彻底弄懂cssem>中单位pxem>和em,remem>的区别

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

saucxs 2019-08-29 12:25 评论0 收藏0
别再被各种单位迷惑：pxem>/em/remem>

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

teren 2019-08-28 18:26 评论0 收藏0
如何更愉快地使用remem> —— 别说你懂CSSem>相对单位

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

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