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 */
    );
} 

它基本上说：

• 对于小于 640 像素的屏幕宽度，我希望字体大小为 1.8em
• 对于大于 1200px 的屏幕宽度，我希望它是 3.7em
• 在两者之间适当缩放字体
• 不要费心将字体大小更改小于 0.3em

Answer 2

如果您希望在达到宽度里程碑（例如 768 像素、370 像素等）时更改它，请使用 CSS3 媒体查询。如果您希望它不断变化，那么您可以使用与图像/div 相同的百分比或 em 技术（即目标/上下文 = 结果），但我建议使用媒体查询。

Answer 3

您可以为响应式字体使用 CSS3 vh、vw和新值。vminvmax

1vw = 视口宽度的 1%

1vh = 视口高度的 1%

1vmin = 1vw 或 1vh，以较小者为准

1vmax = 1vw 或 1vh，以较大者为准

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}

Answer 4

根据您必须支持的浏览器数组，CSS3 视口百分比长度可能是一个很好的解决方案：

http://css-tricks.com/viewport-sized-typography/

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

我决定反对这种方法，因为它只支持 iOS6 而不是 Android，而且我的项目是平板电脑和智能手机移动网站。