html - 响应式字体大小/粗细

Question

我可以使用百分比使我的图像/div 具有响应性。

如何使字体大小响应不同的屏幕大小？

Answer 1

我最近偶然发现了这个问题，并为此编写了一个适合我需要的解决方案。也许您会发现您也可以将它合并到您的 CSS 中。

github.com/wadim/responsive-font-size

用法:

@import "responsive-font-size";

p {
    @include responsive-font-size (
        $min-font-size: 1.8em,
        $max-font-size: 3.7em,
        $min-screen-width: 640px,
        $max-screen-width: 1200px,
        $font-size-step: 0.3em /* optional parameter, default: 0.1em */
    );
} 

它基本上说:

• 对于小于 640px 的屏幕宽度，我希望字体大小为 1.8em
• 对于大于 1200px 的屏幕宽度，我希望它是 3.7em
• 在两者之间适当缩放字体
• 不要为小于 0.3em 的字体大小而烦恼