使用单个CSS类实现可变动态字体大小

j9per5c4 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(179)

我正在寻找一种方法来动态增加字体大小取决于用户的屏幕大小在css是可变的。
我知道你可以使用大众字体大小：calc（16px + 1.2vw）;例如，但是有没有一种方法可以在html中设置初始px大小，并为所有元素调用同一个类，以便只增加1.2vw？
不知道这是否有意义。基本上，我希望有不同的元素与不同的文字大小，增长（或缩小）在相同的速度1.2vw。
我的参考网站是：https://techespresso.ca
任何关于这方面的帮助将不胜感激。谢谢！
附注：我现在对每个元素都使用了一个单独的类，这使得css变得相当庞大和混乱。我想优化装载性能等。

css

来源：https://stackoverflow.com/questions/76326677/variable-dynamic-font-size-using-single-css-class

1条答案

按热度按时间

muk1a3rh1#

我没有清楚地理解你的问题。但如果你的意思是：你想让css变变量，你可以！基本语法：

:root {
    --css-variable-name: css property value;
}

要使用变量，请执行以下操作：

...
css-property: var(--css-variable-name);
...

示例：

:root{
   --primary-color: #0984e3;
   --text-color: #333;
   --primary-font-size: 16px;
   --ratio-font-size: 1.6vw;
}

.primary{
   margin: 0 auto;
   width: 30%;
}
.primary h3{
   color: var(--primary-color);

}
.primary p{
   color: var(--text-color);
   font-size: var(--ratio-font-size);
}

<div class="primary">
   <h3>Head line</h3>
   <p>Hello World</p>
</div>

兼容性和信息：Visit this page

赞(0）回复(0）举报 2023-05-30

我来回答

使用单个CSS类实现可变动态字体大小

1条答案

相关问题

热门标签

最新问答