logo标签列表

响应式字体大小/加粗

htmlcss
4

我可以通过使用百分比来使我的图片/ div 具有响应性。

那么，我如何使字体大小适应不同的屏幕尺寸呢？

你可能会对这个感兴趣。 - Tom
可能是重复的问题：如何根据窗口宽度增加字体大小？ - sachleen
1
我会问“我应该吗？”通常调整浏览器大小是为了看更多的内容，而不是更大的内容。我们有浏览器缩放来处理后者。 - DA.
4个回答
7

最近我遇到了这个问题，然后我写了一个解决方案以满足我的需求。也许你会发现你可以将它融入到你的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
  • 当屏幕宽度大于1200像素时，字体大小为3.7em
  • 在两者之间适当缩放字体大小
  • 不要改变字体大小小于0.3em的部分
这看起来是一个非常好的选择！谢谢！ - Marcy Sutton
3
你可以使用 CSS3 的 vh、vw、vmin 和 vmax 新值来实现响应式字体。

enter image description here

1vw = 视口宽度的1%

1vh = 视口高度的1%

1vmin = 较小的视口宽度或高度的1%

1vmax = 较大的视口宽度或高度的1%

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
3
如果你希望在屏幕宽度达到特定里程碑时（例如768px、370px等）进行更改，则可以使用CSS3媒体查询。如果你希望它不断变化，则可以使用与图片/ div 相同的百分比或em技术（即目标/上下文=结果），但我建议使用媒体查询。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接