响应式字体大小/重量 [英] Responsive font-size/weight

问题描述

我怎样才能让字体大小响应不同的屏幕尺寸？

解决方案

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

github.com/wadim/responsive-font-size

用法：

  @importresponsive-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 / *可选参数，默认值：0.1em * / 
）; 
} 
  

基本上说：

• 屏幕宽度小于640px我希望字体大小为1.8em


• 屏幕宽度大于1200px我希望它为3.7em


• 适当地缩放字体


• 不用担心字体大小小于0.3em

I can make my images/divs responsive by using percentages.

How can I make the font-size responsive to different screen sizes?

解决方案

I stumbled across this problem recently and I wrote a solution for it that suits my needs. Maybe you will find that you can incorporate it into your CSS as well.

github.com/wadim/responsive-font-size

Usage:

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

It basically says:

• for screen width smaller than 640px I want the font-size to be 1.8em
• for screen width greater than 1200px I want it to be 3.7em
• scale the font appropriately in between
• don't bother changing the font size by less than 0.3em

这篇关于响应式字体大小/重量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！