3

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

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

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

所以，第一件事。使用 em's/rem's 的尺寸是否只是为了改变事物相对于主要字体大小的尺寸？

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

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

因此，我开始使用 rem mixin 为我的所有维度（边距、填充和一些高度）构建站点。是的，当我更改主要字体大小时，所有内容都会缩放，但同样的问题与此处的第 2 个问题相同。

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

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

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

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

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

我正在查看一些可用的指南针 mixin，例如这个：

@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？在图像方面，您如何与他们合作？有什么想法吗？

4

2 回答 2

5

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

为什么使用 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's & rem's 是众多工具中的一种，它们的用途与其他工具（像素）一样。它们是一个很棒的工具，值得掌握，因此在需要时使用它们，但仅在问题需要相对大小时使用。

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

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

干杯

于 2013-04-11T19:19:07.950 回答
4

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

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

对于任何类型的响应式/自适应设计工作来说，图像都是一种痛苦。您可能用于流体布局的相同解决方案将有助于基于 em 的布局。常见的解决方案包括background-size属性（Compass 有一个 mixin）并将 html 图像设置为 100% 的最大宽度。请参阅处理灵活媒体的CSS 技巧纲要。我已经使用这种流体媒体混合来处理背景图像等的“内在比率”方法。

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

于 2013-04-11T20:13:05.650 回答