如何使用EM和百分比进行响应式设计？

Question

我终于学习了响应式设计，我需要了解em和百分比测量单位的最佳实践。如果我要将主体的font-size设置为10px，我是否会遇到问题，声明所有字体大小的em（1em = 10px，2.5em = 25px等）？

此外，何时使用em单位与百分比的正确时间？ em单位主要用于排版，然后百分比将用于尺寸，边距，填充等吗？

我喜欢这样的想法，即我可以通过更改正文字体大小按比例缩放字体大小，但我认为我不希望我的布局和间距根据文本的大小进行移位（或者我？）。

Answer 1

最佳做法是允许浏览器的字体大小设置影响您的设计 - 避免以像素为单位设置正文的font-size。

rem单位非常适合确保所有内容按比例缩放到浏览器字体大小。 em单位是根据父元素的字体大小计算的，因此在嵌套元素时使用它们会变得更加棘手。 rem始终相对于html元素的字体大小（根元素）。如果您假设1rem = 16px并构建相对于此的所有内容，那么即使用户已将浏览器设置为1rem = 20px，那么整个设计也会相应地向上扩展。

通过响应式设计，最佳做法是在屏幕宽度处定义媒体查询“断点”，其中内容开始变得不可用（而不是基于流行设备的任意宽度）。当您通过浏览器的字体大小更改扩大或缩小整个站点时，您将希望断点也遵循该字体大小。但是，由于Safari对rem媒体查询的处理方式与其他浏览器不同，因此它为best to use em for media queries。

Answer 2

好的，首先如果你想使用响应式设计，我强烈建议你使用像bootstrap或fondation这样的框架来设计响应式设计。你似乎是这样的新手，而且对于大多数复杂的案例，响应性是一堆css和预处理器。

但是，要回答您的问题，我们不会在大多数情况下调整媒体查询中的字体大小。在每个例子中设置你的字体。因此，您必须在许多设备上测试您的响应度。按布局你可能意味着div。最佳做法是viweport vw（宽度）和vh（高度），除非你想要在另一个元素内部进行比例测量。在这种情况下，请使用％。 Rem比em更好，因为它是root用户。字体的真实大小在html中有所不同。当设备上的屏幕变得太小时，您必须折叠菜单，并且网站上的文字必须以div格式显示。我可以继续这样一段时间，但就像我说的那样，使用框架，更快的学习和更快的开发。像我这样的大多数开发人员都为他们的客户使用框架。