首页 文章

Rem / Em混乱

提问于
浏览 次
2

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

多年来，我一直是一个完全基于像素的人，在需要时会有几个百分比 .

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

所以，首先要做的事情 . 对于尺寸而言，使用em / 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 . 当字体大小改变时，我最终得到的图像太高或太短 . 在这种情况下最好的做法是什么？

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

@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？你如何与图像相关的工作？有什么想法吗？

css sass compass-sass susy-compass em

2 回答

  • 4

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

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

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

    但是，我经常找到一种用较少图像进行设计的方法 . 我喜欢这项技术将我推向那个领域的简单 - 所以它不会打扰我 .

    回复于
  • 4

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

    Why use em or rem units?

    Em＆rem单位用于调整大小相对 .

    Em units: 浏览器中的em单元相对于它's parent' s字体大小发生变化，无论是span，p，div，body还是html元素 . 因此，当将em单位用于字体大小以及宽度或高度时，这些尺寸将取决于当前父级的字体大小 .

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

    The Point: 这些测量值是'relative'所以问题的答案"Why use em or rem units?"适用于em单位，当你想要在网页中调整相对于它的父元素和rem的元素时，只需使用它们，当你想要大小时使用它们相对于文档的元素 .

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

    How should em & rem units be used in design and layout?

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

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

    在这里，我们进入“响应式”设计和布局，试图制作“自适应”网站和应用程序，以及媒体查询和其他技术的用武之地 .

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

    总结一下......

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

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

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

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

    干杯

    回复于

相关问题