Css rem响应式排版-基线字体大小（以%或px为单位）？

我正试图通过使用rems的SCS实现一个响应性排版解决方案，以便只在html中的基线字体大小上使用媒体查询，而不是在每个元素上使用媒体查询

我发现在html中使用不同的字体大小方法：

html { font-size: 100%;  }  // uses the default browser font-size
html { font-size: 62.5%; }  // 62.5% = 10px to facilitate rem calculation
html { font-size: 16px;  }  // uses 16px

假设我会选择这个选项，那么我就可以轻松地使用

然后，我可以将媒体查询应用于html字体大小，以不同的分辨率缩放排版，如下所示：

@media (min-width: 768px) { html { font-size: 56.3%; } } // 56.3% = 9px
@media (min-width: 992px) { html { font-size: 62.5%; } } // 62.5% = 10px
@media (min-width: 1200px) { html { font-size: 68.8%; } } // 68.8% = 11px

我的问题：

1。达到字体大小基线的最佳方法是什么（像素对100%对62.5%）？

2。使用SASS/SCSS进行响应式排版的最佳总体方法是什么？

我不认为这是“最佳方法”，但我最近一直在这样做：

以像素为单位设置基本大小。它将在不同浏览器之间保持一致，并且更易于推理

基线（以像素为单位），rems中元素的所有类型大小，然后在媒体查询中重置基线大小（以像素为单位）

这是Trent Walton撰写的一篇很棒的文章，文章的重点不是实施，而是最佳实践，但我发现它确实很有帮助：

---

我不确定我是否回答了你的问题，但这是一个相当深入的话题

这似乎是一个非常广泛的问题？我在互联网上找到了很多关于如何处理响应性排版的不同建议，但我找不到一个普遍接受的、标准化的解决方案。每个人做这件事的方式似乎都不一样。我认为你已经有了一个相当标准的方法。在我看来，这更多地归结为它是否为项目/设计工作。因为我们这样做是为了让我们的生活更轻松。如果它这样做了，那么它可能是对的。62.5%是9.375像素（至少在我的电脑上），所以我不认为这会有助于rem计算。这就是62.5%方法的问题：它在不同的浏览器中解释不同，这使我认为px中的基线更有意义。此外，我们无法在用户浏览器中100%控制（可能设置为一个完全奇怪的值）。

@media (min-width: 768px) { html { font-size: 56.3%; } } // 56.3% = 9px
@media (min-width: 992px) { html { font-size: 62.5%; } } // 62.5% = 10px
@media (min-width: 1200px) { html { font-size: 68.8%; } } // 68.8% = 11px