css中px、em、rem的区别详解及字体转换表

terry 2年前 (2023-09-27) 阅读数 82 #数据结构与算法

1. px（pixel，像素）：

是一个虚拟的长度单位，是计算机系统的数字图像长度单位。如果要将 px 转换为物理长度，则必须指定精度 DPI（Dots Per Inch，每英寸像素）。扫描和打印时通常有DPI选项。 Windows系统默认为96dpi，Apple系统默认为72dpi。

2。 em（相对长度单位，相对于当前对象中文字的字体大小）：

是相对长度单位，最初是指字母M的宽度，因此得名em。现在指的是字符宽度的倍数，其用法类似于百分比，例如：0.8em、1.2em、2em等。通常1em=16px。

3。 pt（点、磅）：

是长度的物理单位，指的是1/72英寸。 pt=1/72（英寸），px=1/dpi（英寸）

4. rem（root em，root em）：

是CSS3中新的相对单位，引起了很多关注。这个单位和em有什么区别？不同之处在于，当您使用 rem 设置元素的字体大小时，它仍然是相对大小，但它仅相对于根 HTML 元素。这个单位可以说结合了相对尺寸和绝对尺寸的优点。通过它，只需修改根元素就可以按比例调整所有字体大小，并且可以避免逐层混合字体大小的连锁反应。目前除IE8及更早版本外的所有浏览器都支持rem。对于不支持的浏览器，解决办法很简单，就是额外写一条绝对实体语句。这些浏览器忽略用 rem 设置的字体大小。

1。关于 em 和 px 的问题

什么是 px？

px 像素（像素）。相对长度单位。像素 px 与屏幕分辨率相关。（引自CSS2.0手册）em是相对长度单位。相对于当前对象中文本的字体大小。如果当前内联文本字体大小没有手动设置，它将相对于浏览器的默认字体大小。（引自CSS2.0手册） PX函数

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作为单位即可。

em 功能：

1em 指字体大小。它将继承父元素的字体大小，因此它不是一个固定值。所有浏览器的默认字体大小都是 16px。因此，12px = 0.75em。为了在实际应用中方便转换，样式通常设置如下： CSS 代码

html { font-size: 62.5%; }
复制代码

这样，1em = 10px。常用的1.2em理论上就是12px。但是，这种转换在 IE 浏览器中不成立。 1.2em 会比 12px 稍大。解决办法是把html标签样式中的62.5%改为63%，即：CSS代码

html { font-size: 63%; }
复制代码

在中文文章中，一般段落开头都会有两个空格。如果以px为单位的话，12px的字体必须省略24px，14px的字体必须省略28px……这样的转换是非常没用的。如果使用em设备，这个问题就可以轻松解决。一个字的大小为1em，两个字的大小为2em。因此，就这样定义吧：CSS代码

p { text-indent: 2em; }
复制代码

em和px字体单位的区别

字体单位应该使用em而不是px。原因很简单，就是为了在IE6下支持字体缩放，在页面上按ctrl+滚轮，网站没有响应px字体。 px是绝对单位，不支持IE缩放，em是相对单位。当我调整这个博客时，我发现不仅是字体，而且行距（行高）和垂直高度单位都是em。确保缩放时的完整性。

em 具有以下性质：

em 的值不固定；
em 将继承其父元素的字体大小。

em重写步骤：

在body选择器中声明font-size=62.5%；
将原始px值除以10，替换为em为单位；简单，如果你只需要上面两步就能解决问题的话，可能就没人会用px了。经过以上两个步骤，你会发现你网站的字体出乎意料的大。因为em的值不固定，会继承父元素的大小，所以可以将内容划分的字体大小设置为1.2em，即12px。然后你将选择器p的字体大小设置为1.2em，但是如果p属于子内容，则p的字体大小不是12px，而是1.2em= 1.2 * 12px=14.4px。这是因为内容的字体大小设置为 1.2em。这个em值继承了主元素body的大小，即16px * 62.5% * 1.2=12px，p是它的子元素，em继承了它内容的font-height。，即 12 像素。所以 p 的 1.2em 不再是 12px 而是 14.4px。
重新计算放大字体的em值。避免重复声明字体大小，即避免上面提到的1.2 * 1.2 = 1.44现象。比如你声明#content的字体大小为1.2em，那么当你声明p的字体大小时，就只能是1em，不能是1.2em，因为这个em不是那个em，而且它继承了字体。 #content 的高度。变成了1em=12px。

IE中的12px汉字：

当我完成em转换的时候，我还发现了一个奇怪的现象，就是通过上面的方法得到的12px（1.2em）汉字与下面的字体不对应在IE中直接用12px定义。尺寸，但稍大一些。只需要在正文选择器中将 62.5% 更改为 63% 即可正常显示。原因可能是IE处理汉字时，浮点值的精度有限。这种现象只出现在12px的汉字中，英文中不存在。解决方案是将style.css中的62.5%替换为63%。

px、em、pt单位转换工具：

地址：pxtoem.com/

2。 rem 函数

rem 是 CSS3 中新的相对单位（root em，root em）。这个单元引起了很多人的关注。这个单位和em有什么区别？不同之处在于，当您使用 rem 设置元素的字体大小时，它仍然是相对大小，但它仅相对于根 HTML 元素。这个单位可以说结合了相对尺寸和绝对尺寸的优点。通过它，只需修改根元素就可以按比例调整所有字体大小，并且可以避免逐层混合字体大小的连锁反应。目前除IE8及更早版本外的所有浏览器都支持rem。对于不支持的浏览器，解决办法很简单，就是额外写一条绝对实体语句。这些浏览器忽略用 rem 设置的字体大小。示例：

p {font-size:14px; font-size:.875rem;}
复制代码

注意：选择使用哪种字体单位主要由您的项目决定。如果您的用户群使用最新版本的浏览器，建议使用 rem。如果要考虑兼容性，可以使用px，或者同时使用两者。？ 3.5em

小初 36pt48px3em34pt❀x❀x32pt 2.5 5em30pt 40px2.45 em29pt38px2.35em28pt。 3em27pt36px2.25emNo.126pt35px 2.2em25 pt34px❀❀ 2. 24pt32px2em 数量2‍ 1.45 em 编号316pt22pxeme 15pt21px1.3em14.5pt20px1.25em4号14pt 19 像素1.1。 18px1.125em13pt17 px1.05em小四12pt16px 1em1.05emNo.510.5pt 14p x0.875em10pt13px0.8em小五❀x 0.75em8pt11px0.7 em没有。 67.5pt10px0.625em7pt9px❭❭❭6.5pt8px0.5em编号75.5pt7px0.4375emNo.85ptx。作者：BothEyes1993
链接：https://juejin.im/post/5c09ee54518825477c16fd8b
来源：掘金
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明来源。