最近,客户又提出新的需求,想要用户可以更改应用的字体大小,为了方便年龄较大的使用者有较好的体验。
当我拿到这个需求第一反应是变量,然后就是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>