响应的字体大小/重量

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

Answer 2

如果您希望在达到宽度里程碑（例如768px，370px等）时更改它，则使用CSS3媒体查询。如果你希望它不断变化，那么你可以使用与images / div相同的百分比或em技术（即target / context = result），但我建议使用媒体查询。

Answer 3

您可以将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;
}

Answer 4

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

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

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

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