长度单位em和rem之间的差异

em和rem是相对单位，由浏览器转换为像素值，具体取决于您设计中的字体大小设置。如果使用值1em或1rem，浏览器可以将其解析为16px到160px或任何其他任意值。

衬垫套件1em。

衬垫套件1em。

另一方面，浏览器使用px值，因此1px将始终显示为完整的1px。

通过滑动滑块来尝试这个CodePen示例。你可以看到rem和em单位的值可以转换成不同的像素值，而px单位保持固定的大小。

em和rem单元的使用可以使我们的设计更加灵活，可以控制元素的整体放大和缩小，而不是固定的大小。我们可以利用这种灵活性，这使我们能够在开发过程中更加快速灵活地进行调整，并允许浏览器用户调整浏览器大小以实现最佳体验。

em rem单位提供的灵活性和工作模式都差不多，所以最大的问题是，什么时候该用em值，什么时候该用rem值？

em和rem单位的区别在于浏览器将谁转换为px值。了解这种差异是决定何时使用哪种单位的关键。

我们将通过回顾rem和em单元的工作原理来确保您了解每个细节。然后我会谈谈为什么你应该使用em或rem单位。

最后，我们将看看典型元件的设计，以及在实际应用中应该使用什么类型的单元。

当使用rem单位时，它们转换后的像素大小取决于页面根元素的字体大小，即html元素的字体大小。根字体大小乘以你的rem值。

比如根元素的字体大小是16px，10rem就等于160px，也就是10 x 16 = 160。

将CSS填充设置为10雷姆。

使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。

例如，如果一个div的字体大小为18px，则10em将等于180px，即10 × 18 = 180。

将CSS填充设置为10em。

有一种常见的误解，认为em单位是相对于父元素的字体大小。事实上，根据W3标准，它们是相对于使用em单位的元素的字体大小。

父元素的字体大小会影响em值，但这纯粹是因为继承。让我们看看为什么和如何工作。

当存在使用em单位的继承时，情况会很棘手，因为每个元素都会自动继承其父元素的字体大小。继承效果只能被显式字体单位覆盖，比如px和VW。

使用em单位的元素的字体大小取决于它们。但是，此元素可能会继承其父元素的字体大小，而父元素又会继承其父元素的字体大小，依此类推。因此，em中元素的字体大小可能会受到其任何父元素的字体大小的影响。

让我们看一个例子。尝试进入下面的代码栏。当你前进时，使用Chrome开发工具或Firefox的Firebug来检查我们的em单元计算的像素值。

如果我们的根元素的字体大小是16px(通常是默认值)，如果子元素div中的填充值是1.5em，那么div将从根元素继承16px的字体大小。因此，填充将被解析为24px，即1.5 x 16 = 24。

CodePen示例

如果我们再添加一个div来包装原来的div，然后将其字体大小设置为1.25em会怎么样？

CodePen示例

我们的包装div继承了16px的根元素字体大小，并将其乘以自己的字体大小1.25em。这将设置包裹div字体大小为20px，即1.25 x 16 = 20。

现在，我们的原始div不再直接继承自根元素，而是继承自其新的父元素。字体大小为20px 1.5em，其填充值现在等于30px，即1.5 x 20 = 30。

如果我们在原来的div中添加em字体单元，比如1.2em，这种继承效果会更复杂。

CodePen示例

Div从其父级继承了20px的字体大小，然后将其乘以自己的1.2em设置，得到24px，即1.2 × 20 = 24的新字体大小。

div上1.5em的填充现在将再次改变其大小，使用新的字体大小36px，即1.5 × 24 = 36。

最后，为了进一步说明em单位是相对于他们最终得到的字体大小(不是父元素)来说的，我们来看看设置padding: 1.5em，如果我们显式设置div使用14px值，如果不继承字体大小会怎么样。

CodePen示例

现在我们的padding是21px，也就是1.5 x 14 = 21变小了。它不受父元素字体大小的影响。

由于这些隐患，你可以看到为什么有必要知道如何正确管理和使用em单元。

默认情况下，浏览器的字体大小通常为16px，但是用户可以将其更改为9px到72px之间的任何值。

根html元素将继承浏览器中设置的字体大小，除非明确设置一个固定值来覆盖它。

所以，虽然html元素的字体大小直接决定了rem值，但是字体大小可能首先来自于浏览器的设置。

因此，浏览器的字体大小设置可以影响使用的每个rem单位和em单位继承的每个值。

除非被覆盖，否则它将继承浏览器默认设置的字体大小。例如，让我们放置网站的html元素，而不设置字体大小值。

如果用户让他们的浏览器默认字体大小为16px，那么根元素字体大小将为16px。在Chrome开发工具下，可以在Calculated选项卡下看到元素继承的属性。

在这种情况下，10rem等于160px，即10 x 16 = 160。

如果用户将其浏览器中的默认字体大小调整为18px，则根字体大小变为18px。现在10雷姆换算成180px，也就是10 × 18 = 180。

在html元素上设置em单位时，将转换为em值乘以浏览器字体大小的设置。

例如，如果网站的html元素的字体大小属性设置为1.25em，则根元素的字体大小将是浏览器的1.25倍。

如果浏览器字体大小设置为16px，则根字体大小将为20px，即1.25 x 16 = 20。

在这种情况下，10rem将等于200px，即10 × 20 = 200。

所以，如果浏览器字体大小设置为20px，根元素字体大小将解析为25px，即1.25 × 20 = 25。

现在10rem就等于250px，也就是10 × 25 = 250。

所有上述情况归结为以下几点:

Rem单位提供了最大的力量，不仅因为它们提供了一致的大小，还因为它们继承了。它没有使用固定的px单位，而是给了我们一种获取用户偏好的方式，影响网站每一部分rem元素的大小。

因此，使用rem单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都可以调整到合适的大小。

一个站点的初始设计可以侧重于最常见的默认浏览器中16px的字体大小。

使用浏览器默认字体大小16px。

但是，通过使用rem单元，如果用户调整其字体大小，我们也可以确保布局的完整性，并使用较小的文本来避免文本空之间的挤压。

浏览器的字体大小为34px。

如果用户缩小字体，整个布局脱落，那么空白色区域的文字不会太弱。

浏览器字体大小9px

用户会因为各种原因更改字体大小设置。容纳这些设置可以获得更好的用户体验。

重要的是:

有些设计者通过组合rem单位为html元素设置了固定的px单位。这是一种常见的做法，因此当更改html元素的字体大小时，整个页面都可以相应地进行调整。

我强烈反对这种做法，因为它重写并继承了用户设置的浏览器字体大小。更夸张地说，这利用了用户自我调节以获得最佳视觉效果的能力。

如果你真的需要改变html元素的字体大小，那么使用em，rem单位，这样根元素的值也会是用户浏览器字体大小的乘积。

这将允许您通过更改html元素的字体大小来调整您的设计，但仍然保持用户浏览器设置的效果。

Em单位取决于字体大小值，而不是html元素的字体大小。

因此，em单元的主要目的应该是允许特定设计元素中的可扩展性。

例如，您可以使用em值来设置导航菜单项的填充、边距、行高和其他值。

0.9雷姆字体的菜单

这样，如果您更改菜单的字体大小，菜单项周围的间距将在剩余的空之间按比例缩放。

1.2毫米字体的菜单

在上一节中，您看到了em单位是如何失去控制的。出于这个原因，我建议只有在你清楚地识别它们的情况下才使用em单位。

在一些网页设计师中有一个争论。我相信不同的人有不同的首选方法，但我的建议如下。

根据元素的字体大小而不是根元素的字体大小进行缩放。

一般来说，需要使用em单位的唯一原因是缩放没有默认字体大小的元素。

根据上面的例子，按钮、菜单和标题等设计组件可能有自己明确的字体大小。当您更改字体大小时，您希望整个组件能够正确缩放。

universal属性将应用于非默认字体大小的元素上的填充、边距、宽度、高度和行高等效项。

我建议当您使用em单位时，它们所使用的元素的字体大小应该设置为rem单位，以保留可扩展性，但避免继承混淆。

我们经常看到使用em作为字体大小单位，尤其是标题，当我认为如果使用rem会更具扩展性。

标题之所以经常使用em单位，是因为从常规文字的大小来看，em单位比px单位要好。然而，rem单位也可以达到这个目的。如果html元素上的任何字体被调整大小，标题大小仍将被缩放。

尝试更改下面的代码笔，看看html元素上的em字体大小是如何工作的:

CodePen示例

在少数情况下，我们不希望我们的字体大小根据根元素进行调整，只有少数例外。

我们能想到的例子是使用em字体大小的下拉菜单。我们有一个二级菜单项，其文本大小取决于一级字体大小。另一个例子可以是按钮中使用的字体图标，其大小与按钮的文本大小相关。

而网页设计中的大部分元素往往没有这种类型的要求，所以一般使用rem单位的字体大小，em单位只在特殊情况下使用。

Em单位不是必需的，任何缩放大小都是根据浏览器的字体大小设置的。

这几乎占据了标准设计中的所有内容，包括高度、宽度、填充、边距、边框、字体大小、阴影，几乎包括布局的每个部分。

简单来说，所有的扩展性都应该使用rem单位。

创建布局时，以像素为单位往往更方便，但部署时应使用rem单位。

可以使用预处理，比如Stylus/Sass/Less，自动转换unit或PostCSS等插件。

或者，您可以使用PXtoEM手动进行转换。

特别地，当rem单元被用于创建统一且可扩展的设计时，媒体查询也应该是rem单元。这将确保无论用户浏览器的字体大小如何，您的媒体查询都会对其做出反应，并调整您的布局。

例如，如果用户将文本缩放得很高，您的布局可能需要从两栏调整为一栏，因为它可能会在较小的移动设备上显示。

如果断点的像素宽度是固定的，那么只有不同的视窗大小才能触发它们。但是基于rem断点，它们会对不同的字体大小做出反应。

布局中的列宽通常应为%，以便它们可以平滑地适应大小不可预知的视口。

但是，rem值仍然应该用于设置单个列的最大宽度。

例如:

保持本专栏的灵活性和可扩展性。可以防止它变得太宽。

在一个典型的网页设计过程中，不会有很多部分的布局，你不能使用灵活的设计。但是，偶尔您会遇到确实需要使用显式固定值来防止缩放的元素。

采用固定大小值的前提应该是，如果缩放，其结构会被打破。真的不会经常发生，所以在想拿出来之前，问问自己是不是用了那些px单元是绝对有必要的。

让我们用一个简短的象征性要点来总结一下我们介绍的内容:

em和px最大的区别？

em和px的区别就在于：

1.em指的是相对长度，相对单位长度指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。相对长度还有：ex、ch、rem、vw、%等等。

2.px是绝对长度单位，它是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。绝对长度还有：cm、mm、in、pt等等。

js中px什么意思？

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

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

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

变频器面板LOC REM是什么意思？

变频器LOC灯为本地控制模式，控制盘上有个按键分别是LOC/rem，rem为远程控制模式，按一次切换

变频器的指示灯老闪,电源线的线头接触不良,线路松动,要么就是指示灯快不行了,需要换新的指示灯,若自己不专业修不了,可以到专业修理门市修理。

已达到认可的检测到的错误的限制阈值；

控制器检测到，系统已达到或超过最大错误帧数了。

小程序滚动图尺寸多大？

关于rpx的概念，其他人说了，我就不重复了。

你在设计稿件中可以把图片做成750px宽，而高度，我建议你做成1600，然后掐头去尾留1400高度作为画布的高度。并且要求考虑到屏幕变长变短后UI是否可以适应。(这个和设计自适应网页一致)

为什么要这样做？

不同手机高度是不相同的。当然宽度也不相同，但是小程序给了你一种机制rpx，可以把屏幕宽度确定在750rpx，那么只要考虑高度上适应。

做到含系统UI1600的话，差不多是小屏幕和大屏幕的折中。那么你在这个基础上调整，能够比较方便。

如UI要考虑到横屏？

那这个时候就很不一样了喔，要把高宽思维调过来。

如果内容图片要支持高清？

那么你设计UI的时候，按照750px屏宽做可以的。

但是在处理内容图片的时候可以再翻大一倍。代价就是图片变大了。这个权衡好了再定。如果一个界面一下子打开一百个内容的列表，一口气要加载十几m图片，那体验也会糟糕。

如果不是设计，是开发定义css怎么办？

和其他人不同，我不建议用750rpx定义。如果需要横向盛满，那么应该用100%，或者更酷的100vw。

如果是UI元素的，用em，rem。这些都是CSS原生的概念。和一个像素被智能切成了多少个像素没关系。

这样就可以延续更加成熟的CSS框架思想