Rem / Em混乱

Question

我一直在一个新站点上使用em / rem's进行游戏，我想在这里讨论/询问几件事。

多年来，我一直是一个完全基于像素的人，并在需要时抛出了一些百分比。

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

所以，首先是第一件事。使用em / rem来标注尺寸仅仅是为了改变相对于主字体大小的东西的尺寸？

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

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

因此，我开始使用rem mixin构建所有尺寸（边距，边距和一些高度）的站点。是的，当我更改主字体大小时，一切都会缩放，但是再次出现，与此处的数字2相同。

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

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

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

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

5b。我有一个div，其高度设置为rem等于200px的高度。然后，我在其中添加了一个高度为200px的图像。使用可疑的mixin跨栏将图像的宽度设置为特定的列宽，并将高度设置为auto。更改字体大小后，我最终得到的图像太高或太短。在这种情况下最好的办法是什么？

我正在浏览一些可用的指南针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？您如何在图像方面与他们合作？有什么想法吗？

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，当您要相对于文档调整元素大小时，请使用它们。

这是一种简单的方法，但是可以将Web设计置于下一个问题的正确环境中。

em＆rem单元应如何用于设计和布局？

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

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

在这里，我们进入“响应式”设计和布局，以尝试制作“自适应”站点和应用程序，还引入了媒体查询和其他技术。

就我个人而言，我几乎只将em用于元素的类型，边距和填充。我用百分比描述尺寸，然后几乎总是宽度。在这个设备，设备尺寸和像素比率每年都在成倍增长的世界中，您无能为力。

总而言之，...

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

2） Em和Rem是许多工具之一，其目的与其他工具（像素）一样。它们是一个很好的工具，值得精通，因此在需要时（但仅在问题需要相对调整大小时）才使用它们。

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

即使它不能回答您在此处提出的所有问题，我也希望能有所帮助。

干杯