响应式字体大小/粗细答案

【问题标题】：Responsive font-size/weight响应式字体大小/粗细
【发布时间】：2012-07-12 16:41:25
【问题描述】：

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

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

【问题讨论】：

您可能对 [this][1] 感兴趣。 [1]：stackoverflow.com/questions/1181689/…
How to increase font size based on window width?的可能重复
我会问“我应该吗？”。通常浏览器调整大小是为了查看更多内容，而不是更大的内容。我们有浏览器缩放来处理后者。

标签： html css

【解决方案1】：

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

1vw = 视口宽度的 1%

1vh = 视口高度的 1%

1vmin = 1vw 或 1vh，取较小者

1vmax = 1vw 或 1vh，取较大者

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

我最近偶然发现了这个问题，并为此编写了一个适合我需要的解决方案。也许你会发现你也可以将它合并到你的 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

【讨论】：

这看起来不错！谢谢！

【解决方案4】：

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

【讨论】：