Question

我今天在一个新网站上玩过em / rem的游戏，并且有几件我想在这里讨论/询问的事情。

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

我一直在阅读他们和他们的“网络应该是”的方式。公平足够，这就是为什么我今天放弃了。

所以，首先要做的事情。对于尺寸而言，使用em's / rem的意义仅仅是为了改变相对于主要字体大小的事物的尺寸吗？

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

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

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

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

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

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

5a上。我有一个h2设置为内联块并添加了填充，然后在右边的remp相当于45px填充。我将line-height设置为1.3的无单位值。然后我将图像设置为h2的背景，显示在右侧以显示在填充右侧。在标准基础字体大小16px一切都很好。但是，我增加或减少该字体大小，并关闭图像的顶部和底部。那么问题2又来了。我知道为什么图像会被裁剪掉，但是它是如何处理em / rem和想象我的图像之间的关系的。

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

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

@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＆amp; rem单位用于相对调整大小。

Em units：浏览器中的em单元相对于其父级的font-size更改，无论是span，p，div，body还是html元素。因此，当将em单位用于字体大小以及宽度或高度时，这些尺寸将取决于当前父级的字体大小。

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

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

这是一个简单的方法，但它将网页设计放在下一个问题的正确背景中......

em＆amp; rem单位用于设计和布局？

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

在大多数情况下，rem，rem＆amp;百分比用于创建灵活的布局，灵活的布局具有完全不同的Web方法，并且使用其中的元素而不是基于像素的设计。例如，如果您有一个容器需要相对于文档宽度进行扩展并且其中包含图像，那么您可能希望该图像与容器一起调整大小，或者根据可用空间的不同来定位自己。

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

就我个人而言，我几乎只使用em类型和边距＆amp;填充元素。尺寸我用百分比来描述，然后它几乎总是只有宽度。在设备，设备尺寸和像素比率每年都翻倍的世界里，你可以控制的只有这么多。

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

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

2） Em＆amp; rem是众多工具中的一种，可以满足其目的，因为其他工具（像素）可以为其服务。它们是一个很好的工具，值得掌握，所以在需要时使用它们，但只有当问题需要相对尺寸时才使用它们。

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

我希望即使它没有回答你在这里提出的所有问题，也会有所帮助。

干杯

Answer 2

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

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

图像对于任何类型的响应/自适应设计工作都是一种痛苦。您可能用于流体布局的相同解决方案将有助于基于em的布局。常见的解决方案涉及background-size属性（Compass有一个mixin），并将html图像设置为最大宽度100％。请参阅CSS-Tricks Rundown of Handling Flexible Media。我使用这个fluid-media mixin来处理背景图像等的“内在比率”方法。

但是，我经常找到一种用较少图像进行设计的方法。我喜欢这项技术促使我在这方面走向简约 - 所以它不会打扰我。

Rem / Em混乱

2 个答案: