使用css变量实现更改字体大小功能

最新推荐文章于 2024-10-04 19:07:50 发布

o_o6666

最新推荐文章于 2024-10-04 19:07:50 发布

阅读量1.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/o_o6666/article/details/114488340

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用CSS变量（CSS Custom Properties）来实现应用中字体大小的动态调整，以提升老年用户的体验。通过在`:root`选择器中声明变量，然后在样式中引用这些变量，可以轻松更改字体大小。示例代码展示了如何设置和更改CSS变量的值，以及如何读取变量的值，从而实现用户自定义字体大小的功能。

摘要由CSDN通过智能技术生成

最近，客户又提出新的需求，想要用户可以更改应用的字体大小，为了方便年龄较大的使用者有较好的体验。

当我拿到这个需求第一反应是变量，然后就是scss或less。但是我突然想起之前无意中扫了一眼的文章提到css变量，经过一番学习及实现，嗯，真香，是真的香~
在这里插入图片描述
废话不多说，上代码：

<style>
/*变量声明*/
:root { // 放在root里可以全局访问
   --bigSize: 0.38rem;// 1 头
   --midSize:0.376rem;// 2 标题
   --minSizemid:0.32rem;// 4  一般内容都用这个就行
   --minSizeMin:0.29rem;// 5  小提示
}

/* 变量使用 */
.bigFontSize{font-size:var(--bigSize);
<style>



/* 当用户手动更改字体大小时 */
<script>
document.body.style.setProperty("--bigSize", "0.34rem"); // 改变变量的值

// 也可以单纯读取变量的值
var docu = getComputedStyle(document.documentElement);
var color = docu.getPropertyValue('--bigSize').trim();
</script>