css - Rem/Em 混淆

Question

我今天一直在尝试在一个新站点上使用 em/rem，并且有几件事我想在这里讨论/询问。

多年来，我一直是一个完全基于像素的人，在需要时会投入一些百分比。

我一直在读到 em 和 rem 是网络应有的“方式”。足够公平，这就是我今天试一试的原因。

所以，首先要做的是。将 em/rem 用于尺寸的意义是否真的只是为了改变事物相对于主要字体大小的尺寸？

如果是这样，那么在什么情况下您会更改主要字体大小？我一直将我的设置为 16px 并使用它。

我找到了一个 Sass mixin，它允许我以像素为单位指定任何属性的尺寸，并使用 rem 和基于像素的后备输出它。不过，我先根据自己的喜好对其进行了调整。

然后我开始使用 rem mixin 为我的所有尺寸(边距、填充和一些高度)构建网站。是的，当我改变主要字体大小时，一切都会缩放，但同样，与此处的第 2 个问题相同。

我使用 Compass Susy 来设置我的网格并使用 em 来指定它的设置(我通常会选择像素)。我将 Susy 中的网格样式设置为魔法网格，当浏览器比网格宽但内部完全灵活时，它使网格保持静态。

当然，我所读到的关于使用 em 的好处的所有内容都可以使用媒体查询来完成吗？你们做什么，最重要的是主流网站使用什么？

对了，后面两题是关于图片的。我今天遇到了两种情况，在方程中的某处使用 em/rem 和图像导致了问题。

5a。我将 h2 设置为内联 block 并在周围添加了填充，然后在右侧添加了相当于 45px 填充的 rem。我将行高设置为无单位值 1.3。然后，我将图像设置为 h2 的背景，使其出现在右侧以出现在 padding-right 中。在 16px 的标准基本字体大小下，一切都很好。然而，我增加或减少了字体大小，图像的顶部和底部被裁剪掉了。所以再问2。我明白为什么图像被裁剪了，但困扰我的是如何处理 em/rem 和图像之间的关系。

5b。我有一个高度设置为 rem 相当于 200px 高度的 div。然后我在其中添加了一个高度为 200px 的图像。使用 susy mixin span-columns 将图像的宽度设置为特定的列宽，高度设置为自动。更改字体大小时，我最终得到的图像太高或太短。在这种情况下最好做什么？

我正在查看一些可用的 compass 混合插件，例如这个:

@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
  margin-left: 0;
  li {
    padding-left: $padding;
    background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
    list-style-type: none;
  }
}

我不能在里面添加我所有的 em/rem 东西吗？

我认为最主要的问题是:

为什么首先需要 em/rem？你如何与他们合作处理图像？有什么想法吗？

Answer 1

关于您的帖子有很多要说的，最好从一些基础知识开始:

为什么使用 em 或 rem 单位？

Em 和 rem 单位用于相对地确定事物的大小。

Em 单位:浏览器中的 em 单位会根据其父元素的字体大小发生变化，无论是 span、p、div、body 还是 html 元素。因此，当对字体大小和宽度或高度使用 em 单位时，这些尺寸将取决于当前父级的字体大小。

Rem 单位:浏览器中的 rem 单位与文档的基本字体大小有关。如果您将其设置为 16px，则 1rem 为 16px，2rem 为 32px，依此类推。这意味着您可以在一个点上更改整个文档的比例，并且使用该相对测量值的任何内容都将相应地增加/减少。

要点:这些测量值是“相对的”，因此“为什么使用 em 或 rem 单位？”这个问题的答案是针对 em 单位的，当您想要调整大小时只需使用它们网页中相对于其父元素的元素，对于 rem，当您想要相对于文档调整元素大小时使用它们。

这是一种简单的方法，但它可以将网页设计置于下一个问题的正确上下文中......

在设计和布局中应如何使用 em 和 rem 单位？

这个问题的答案也是多方面的，但简单地说，使用 em、rem 或任何“相对”度量来描述设计中的元素是远离基于静态像素的设计。

在大多数情况下，em、rem 和百分比用于创建灵活的布局，而灵活的布局对 Web 和使用其中的元素的方法与基于像素的设计完全不同。例如，如果您有一个需要相对于文档宽度扩展的容器，并且其中有一个图像，您可能希望该图像随容器一起调整大小，或者根据可用空间将其放置在不同的位置。

这就是我们进入“响应式”设计和布局以尝试制作“自适应”网站和应用程序的地方，也是媒体查询和其他技术的用武之地。

我个人几乎只将 em 用于元素的类型、边距和填充。我用百分比描述尺寸，然后它几乎总是只有宽度。在一个设备、设备尺寸和像素比率每年翻一番的世界里，您能控制的只有这么多。

总而言之，有点……

1) 如果您需要静态尺寸，请坚持使用像素。如果您需要特定的固定尺寸，使用相对测量通常没有真正的好处。

2) Em 和 rem 是众多工具中的一种，它们的用途与其他工具(像素)的用途一样。它们是一个很棒的工具，值得掌握，因此请在需要时使用它们，但仅当问题需要相对调整大小时才使用。

3)您可能希望将这些 Compass Susy 问题拆分成更具体的帖子，并在需要帮助时提供一些示例。

我希望这对您有所帮助，即使它不能回答您在这里提出的所有问题。

干杯