Rem/Em混淆

Question

今天我在一个新网站上使用em‘s/rem，有几件事我想在这里讨论/问一下。

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

我一直在读到em和rem是web应该是的“方式”。很公平，这就是我今天尝试的原因。

所以，首先要做的就是。使用em's/rem's表示尺寸的意义是否仅仅是为了改变相对于主要字体大小的东西的尺寸？

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

我找到了一个Sass混入，它允许我以像素为单位指定任何属性的尺寸，并使用rem和基于像素的回退来输出它。我先根据自己的喜好调整了一下。

因此，我开始使用rem混入来构建我的所有维度(边距、填充和几个高度)的站点。是的，当我改变主要的字体大小时，所有的东西都会缩放，但同样的，这里的第二个问题。

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

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

好的，接下来的两个问题是关于图像的。今天我遇到了两种情况，将em/rem与等式中某处的图像一起使用会导致问题。

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

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

我查看了一些可用的指南针混音，例如这个：

@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

Ems/rems用于使站点适应客户端的不同设置。我的浏览器设置可以增加或减小您网站上的字体大小，使用em/rem可以让您适应我的设置。这是一种权衡--就像网页设计中的其他事情一样--在你的像素精确控制和你愿意围绕变化和用户控制进行设计之间进行权衡。没有正确的答案-但我想提醒自己，网络的整个技术都是以用户控制为重心的，任何试图让我成为像素肛门的人都是在与核心技术作斗争。

Ems/rems可以在媒体查询中用来设置断点宽度，但它们解决了适应性公式的不同部分-字体大小，而不是屏幕大小。你的Susy网格现在可以同时适应这两种情况了！

图像对于任何类型的响应式/自适应设计工作都是一件痛苦的事情。对于基于em的布局，您可能会使用与fluid布局相同的解决方案。常见的解决方案包括background-size属性(Compass提供了一个混合属性)和将html图像的最大宽度设置为100%。请参阅CSS- Rundown of Handling Flexible Media技巧。我使用这个fluid-media mixin来处理背景图像的“固有比率”方法。

但是，通常情况下，我会找到一种使用较少图像进行设计的方法。我喜欢这项技术将我推向这一领域的简单性--所以它不会困扰我。

Answer 2

关于你的帖子有很多要说的，最好从几个基础开始：

为什么使用em或rem单位？

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

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

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

The Point:这些测量单位是“相对的”，所以“为什么使用em或rem单位？”这个问题的答案是em单位，当你想相对于它的父级调整网页中的元素大小时，简单地使用它们；对于rem，当你想相对于文档调整元素大小时，使用它们。

这是一个简单的方法，但它将网页设计放在了下一个问题的正确上下文中。

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

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

在大多数情况下，rem & percentages被用来创建灵活的布局，而灵活的布局与基于像素的设计相比，在网页和其中使用元素的方法完全不同。例如，如果您有一个需要相对于文档宽度进行扩展的容器，并且其中包含一个图像，则您可能希望该图像与容器一起调整大小，或者根据可用空间以不同的方式放置图像。

这就是我们进入“响应式”设计和布局的地方，试图让网站和应用程序变得“自适应”，也是媒体查询和其他技术发挥作用的地方。

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

所以总而言之，有点...

1)如果你需要静态尺寸，只需要像素。如果您需要特定的固定尺寸，使用相对测量通常没有实际好处。

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

3)你可能想把这些指南针Susy的问题分成一个更具体的帖子，如果你需要帮助的话，还可以提供一些例子。

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

干杯