摘要：在平时的工作当中，我发现自己大多数时候是用来作为字体单位的，不仅如此，其实公司的所有前端项目都是以作为字体单位的。我们知道像素作为相对长度单位是相对于显示器的分辨率而言的。很好地解决了的字体大小从父元素继承所带来的不便。
px
在平时的工作当中，我发现自己大多数时候是用px来作为CSS字体单位的，不仅如此，其实公司的所有前端项目都是以px作为CSS字体单位的。我们知道px（像素）作为CSS相对长度单位是相对于显示器的分辨率而言的。它的特点是稳定、精确、浏览器兼容性好，但是对应的，在Web页面中使用px作为字体的单位时也有它的问题，比如当用户试图调整浏览器的默认字体大小时，由于px是固定大小的，所以再怎么调整对应页面上字体的大小都是不会变的。
em于是为了解决上面提到的px作为字体单位的类似问题，又引入了一个新的CSS字体单位em，em作为字体单位也是一个相对长度单位，它相对于当前对象内文本的字体大小，若当前对象内文本的字体大小未被设置，则采用浏览器默认的字体大小。
任意浏览器的默认字体大小都是16px，所以在浏览器字体大小保持默认的状态下：1em = 16px，那么1px = 1 / 16 = 0.0625em，10px = 0.625em，同理12px = 0.0625 x 12 = 0.75em，14px = 0.0625 x 14 = 0.875em。
但是如果每次都要去进行对应的px值到em值得计算的话，想必会大大降低开发效率，为了简化px到em的值转换，可以在CSS中声明body的字体大小为62.5%，即body {font-size: 62.5%}，这样一来，1em = 16px * 62.5% = 10px，那么对应的12px = 1.2em，14px = 1.4em，这样换算起来就简单的多了。
但是像上面这样还是有一个问题，就是em作为字体单位是会继承父元素字体大小的，上面的计算是假设所有元素的字体大小都以body的字体大小作为继承基准，然而实际的情况往往都不是这样的。举一个例子，如下DOM结构：
在默认情况下，我们期望标签下面的字体大小应该为1.2em也就是12px，标签下面的字体大小为1em也就是10px，但实际像上面这样我们得到的最终结果是标签下面的字体大小为1.2 x 1.2 = 1.44em = 14.4px，标签下面的字体大小为1.2 x 1 = 1.2em = 12px，这个就是因为em作为字体单位会继承父元素的字体大小，在本例中，由于给父元素设置了字体大小为1.2em，所以浏览器在计算标签和标签的字体大小时就是上面实际所得到的结果。
这样一来其实em真正的计算公式就是：1 ➗ 当前父元素的font-size x 需要转换的像素值 = em值，就不是单纯地每次都去除以16px了，显然这种继承的方式在开发时会带来极大的不便。
rem为了解决上面提到的em字体大小继承问题，又诞生出了一个新的CSS字体大小单位：rem，即 “root em”，它在字体大小与px进行换算时与em有着同样的换算规则，但唯一不同的是，rem只会以根元素的字体大小作为换算基准，而不会每次都从自己当前的父元素那里继承，在Web页面中根元素就是，它的字体大小就是浏览器当前所设置的字体大小，默认情况下就是16px。
这样一来，按照上面提到的转换规则，还是上面的例子，把赋值给，即，所有的单位改成rem，就可以得到我们的期望结果：标签下面的字体大小应该为1.2rem也就是12px，标签下面的字体大小为1rem也就是10px（此处只讲述原理，假设忽略浏览器的最小字体大小限制）。
rem很好地解决了em的字体大小从父元素继承所带来的不便。
浏览器兼容性rem是CSS 3当中引入的单位，支持的浏览器有：Mozilla Firefox 3.6+、Apple Safari 5.0+、Google Chrome、IE9+和Opera11+，在现代浏览器或移动端，我们可以放心地使用rem来作为字体大小单位，但是如果你想使用rem这个单位，又想兼容低版本的IE浏览器，可以考虑px和rem同时使用，用px兼容低版本IE的效果，用rem实现现代浏览器的效果。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111846.html
摘要：所以未经调整的浏览器都符合。原因可能是处理汉字时，对于浮点的取值精确度有限。是新增的一个相对单位，根。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 单位转换工具 点我 px px是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)...
摘要：写了一篇文章，里面记录了他在实际使用单位过程中的一些感受。他的解决方式充分利用了到目前为止我们遇到的三种单位。根元素的长度单位依旧采用，模块用单位，模块内的元素使用单位。随后在中单位的强大之处提出了他的观点。 什么是 rem 可能在你使用收音机或者用其他音乐播放器之前，就已经听过R.E.M.这个词了。在这个乐队眼中，这个词是浅睡眠时眼球的快速转动的缩写，而在 css 中，rem 代表着...
摘要：是相对长度单位。相对于当前对象内文本的字体尺寸。引自手册特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 IE无法调整那些使用px作为单位的字体大小； ...
摘要：引自手册是相对长度单位。所有未经调整的浏览器都符合。特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 在他处看到一篇好文章，想记录在自己的学习笔记中，原文作者看到我转载若是介意，联系我立马就删除，附上原文链接：http://www.huolg.net/html5/htm...
摘要：值得注意的是，这个设置对使用或其他绝对单位定义的字号大小无效。事实上，提供了一个在和间的相对单位折中解决方案，而且更易于使用。图使用相对单位和继承字号的面板下面是模板，加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其...
阅读 2029·2021-11-25 09:43
阅读 1061·2021-11-23 09:51
阅读 2270·2021-10-08 10:04
阅读 3157·2021-09-06 15:00
阅读 2625·2021-09-02 15:34
阅读 851·2021-08-16 10:57
阅读 1208·2019-08-30 12:46
阅读 826·2019-08-29 12:22
