Question

我正在尝试使用带有SC的SCSS实现响应式排版解决方案，以便仅在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

假设我接受62.5%-approach suggested by Jonathan Snook，我可以使用a mixin for px-fallbacks:轻松指定我的标题和段落

@mixin font-size($sizeValue: 1.6) {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}

h1 { @include font-size(3.2); }         // 32px
h2 { @include font-size(2.6); }         // 26px
h3 { @include font-size(2.2); }         // 22px
h4 { @include font-size(1.8); }         // 18px
h5 { @include font-size(1.6); }         // 16px
h6 { @include font-size(1.4); }         // 14px

然后，我可以将媒体查询应用于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。字体大小基线的最佳方法是什么（px vs 100％vs 62.5％）？

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

Answer 1

我不认为这是最好的方法＆＃34;，但这是我最近一直在做的事情：

以像素为单位设置基本尺寸。它将在浏览器中保持一致，并且更容易推理。
以像素为单位的基线，rems中元素的所有类型大小，然后只重置媒体查询的基线大小（以像素为单位）。

这是Trent Walton写的一篇很棒的文章，它不是关于实现的，而是关于最佳实践的更多内容，但我觉得它非常有用：http://trentwalton.com/2012/06/19/fluid-type/

我不确定是否回答了您的问题，但这是一个非常深入的话题！

使用rem的响应式排版 - 以％或px为基准的字体大小？

1 个答案: