我终于学会了响应式设计，我需要了解 em 和百分比测量单位的最佳做法。如果我将正文的font-size 设置为10px，我会在声明所有字体大小 em（1em = 10px、2.5em = 25px 等）的行中遇到问题吗？
另外，使用 em 单位与百分比的正确时间是什么时候？ em 单位是否主要用于排版，然后百分比将用于大小、边距、填充等？
我喜欢这样的想法，即我可以通过更改正文字体大小在媒体查询中按比例缩放字体大小，但我认为我不希望我的布局和间距根据文本大小而变化（或者我？）。
【问题讨论】：
标签： css responsive-design font-size
好的，首先，如果您想使用响应式设计，我强烈建议您使用像 bootstrap 或基金会这样的框架来进行响应式设计。这样看来，您似乎是新手，并且响应性是大多数复杂情况下的一堆 css 和预处理器。
但是，为了回答您的问题，在大多数情况下，我们不会在媒体查询中调整字体大小。以 rem 为示例设置您的字体。因此，您必须在许多设备上测试您的响应能力。通过布局，您可能必须指 div。最佳实践是 viweport vw（宽度）和 vh（高度），除非您想要在另一个元素内进行比例测量。在这种情况下，请使用 %。 Rem 比 em 好，因为它是根 em。在 html 中定义的字体的真实大小。当设备上的屏幕变得太小时，您必须折叠菜单，并且您网站上的文本必须放在一个 div 中。我可以这样继续一段时间，但就像我说的，使用框架，更快的学习和更快的开发。大多数像我这样的开发人员都为他们的客户使用框架。
【讨论】：
最好让浏览器的字体大小设置影响您的设计——避免以像素为单位设置正文的font-size。
rem 单位非常适合确保所有内容都与浏览器字体大小成比例。 em 单位是根据父元素的字体大小计算的，因此在嵌套元素时使用它们会变得更加棘手。 rem 总是相对于 html 元素（根元素）的字体大小。例如，如果您假设 1rem = 16px 并构建与之相关的所有内容，那么即使用户已将浏览器设置为 1rem = 20px，那么整个设计也会相应地放大。
对于响应式设计，最佳做法是在内容开始变得不可用的屏幕宽度处定义媒体查询“断点”（而不是基于流行设备的任意宽度）。当您的整个站点通过浏览器的字体大小更改放大或缩小时，您将希望断点也尊重该字体大小。但是，由于 Safari 对rem 媒体查询的处理与其他浏览器不同，因此它是best to use em for media queries。
【讨论】：