vue项目中利用scss进行全局字体放大

新公司需要上架浙里办政府服务网的PC端，在审核的时候被老龄化适配打回来了。需要做全局的字体放大，在网上查了一些博客，最后结合自己的实际情况做了下简单适配

1. 首先我们在页面的根节点上设置一个自定义属性用于记录当前的字体状态，如果没有该属性则按默认设置字体大小展示

window.document.documentElement.setAttribute('data-size', 1.4)

2. 然后再创建一个mixin.scss文件用来设置字体样式 这个方法主要的功能是：

在html标签上没有data-size属性或data-size属性不在方法声明的条件中时，使用传入的font-size大小，当data-size符合条件时，使用对应的字体大小，放大的倍数就是乘以的倍数。

@mixin set-font-size($size,$important: false) {
  font-size: $size if($important, !important, null);
  [data-size="1.1"] & {
    font-size: $size * 1.1;
  }
  [data-size="1.2"] & {
    font-size: $size * 1.2;
  }
  [data-size="1.3"] & {
    font-size: $size * 1.3;
  }
  [data-size="1.4"] & {
    font-size: $size * 1.4;
  }
}

3. 在所有需要适配的页面引入mixin.scss文件，在设置font-size的位置使用css 中的@include属性进行字体大小设置

<style lang="scss" scoped>
@import "~@/css/mixin.scss";

.home-container {
  @include set-font-size(14px);
}

4. 最后，通过动态改变根节点的data-size属性就可以实现整体的字体放大或是缩小的效果了！

$(".zoomin").click(function () {
  window.document.documentElement.setAttribute('data-size', 1.4)
  zoomin1();
});
$(".zoomout").click(function () {
  window.document.documentElement.setAttribute('data-size', 0)
  zoomout1();
});