hanzi-writer生成的svg外有一层div，修改div宽高影响的是画布大小，字体在不同视口下完全不相同。我想要让字体跟画布同比例大小该怎么实现？

Question

1、hanzi-writer生成的svg外有一层div，修改div宽高影响的是画布大小，字体在不同视口下完全不相同。我想要让字体跟画布同比例大小该怎么实现？
2、LocomotiveScroll怎么在vue3全网页（最大的父容器）中进行顺滑滚动？不知道加在哪里。

问题一代码

<template>
  
  <div class="header">
    
    <div v-for="item of 200" :key="item" class="snowflake"></div>
    <div class="title">
      
      <div class="title__parent">
        <Transition
          name="fade"
          enter-active-class="animate__animated animate__slideInUp"
        >
          <p v-if="show" class="title__top">驶出孤岛</p>
        </Transition>
      </div>
      <div class="title__row">
        <div class="title__parent">
          <Transition
            name="fade"
            enter-active-class="animate__animated animate__slideInUp animate__fast delay"
          >
            <p v-if="show" class="title__row__left">的</p>
          </Transition>
        </div>
        
        <div class="title__row__right">
          <div id="character-target-div1"></div>
          <div id="character-target-div2"></div>
          <div id="character-target-div3"></div>
        </div>
      </div>
    </div>
  </div>
</template>

import { onMounted, ref } from "vue";
import HanziWriter from "hanzi-writer";
export default {
  name: "Header",
  setup() {
    const show = ref(false);
    const chainAnimations = () => {
      //创建笔法“淘”字实例
      var writeOne = HanziWriter.create("character-target-div1", "淘", {
        padding: 5, //内边距
        showCharacter: false, //不显示汉字
        showOutline: false, //开启动画时不显示汉字
        strokeColor: "#000000", //字体颜色
        strokeAnimationSpeed: 5, //动画速度
        delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
      });

      //创建笔法“金”字实例
      var writeTwo = HanziWriter.create("character-target-div2", "金", {
        padding: 5, //内边距
        showCharacter: false, //不显示汉字
        showOutline: false, //开启动画时不显示汉字
        strokeColor: "#000000", //字体颜色
        strokeAnimationSpeed: 5, //动画速度
        delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
        drawingWidth: 10,
      });

      //创建笔法“者”字实例
      var writeThree = HanziWriter.create("character-target-div3", "者", {
        padding: 5, //内边距
        showCharacter: false, //不显示汉字
        showOutline: false, //开启动画时不显示汉字
        strokeColor: "#000000", //字体颜色
        strokeAnimationSpeed: 5, //动画速度
        delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
      });

      setTimeout(function () {
        writeOne.animateCharacter({
          onComplete: function () {
            setTimeout(function () {
              writeTwo.animateCharacter({
                onComplete: function () {
                  setTimeout(function () {
                    writeThree.animateCharacter();
                  }, 0);
                },
              });
            }, 0);
          },
        });
      }, 980);
    };
    //挂载执行
    onMounted(() => {
      show.value = true;
      chainAnimations();
    });

    return { show };
  },
};

* {
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100%;
  height: 150vh;
  display: flex;
  justify-content: center;
  background: linear-gradient(
    to top,
    #fffbf7 40%,
    #fff1da 70%,
    rgb(252, 221, 180) 99%
  ) !important;

  .title {
    width: 90%;
    height: 3.56rem;
    margin: 2.8rem 0 0 0;
    letter-spacing: 0.5rem;
    &__parent {
      display: block;
      overflow: hidden;
    }
    &__top {
      display: block;
      font-size: 1.496rem;
      font-family: 宋体;
      font-weight: bold;
      margin-left: 1rem;
    }
    &__row {
      display: flex;
      justify-content: flex-end;
      margin-right: 1.2rem;
      &__left {
        color: #000000;
        font-size: 1.496rem;
        font-family: 宋体;
        margin-right: 0.2rem;
      }
      &__right {
        display: flex;
        color: #000;
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
      }
    }
  }
}

#character-target-div1,
#character-target-div2,
#character-target-div3 {
  width: 1.5rem;
  height: 1.5rem;

}

.snowflake {
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: url(../../images/falling.gif) no-repeat; //金色叶子
  background-size: 100% 100%;
  position: fixed;
  top: -10vh; //出事高度在屏幕外 效果更真实
  z-index: 1; //背景图层不遮挡上面元素
}

@keyframes fall {
  100% {
    transform: translate3d(var(--end), 100vh, 0);
  }
}

@for $i from 0 through 200 {
  .snowflake:nth-child(#{$i}) {
    //每个雪花的大小
    --size: #{random(6) * 0.1}vw;
    //雪花移动目标点
    --end: #{random(20) - 40}vw;
    //雪花初始位置
    left: #{random(150)}vw;
    //雪花从顶到底移动的动画 动画时间可以调整雪花速度
    animation: fall #{5 + random(8)}s linear infinite;
    animation-delay: -#{random(10)}s;
  }
}

.animate__slideInUp {
  animation-duration: 0.9s;
}

.delay {
  animation-duration: 0.98s;
  animation-delay: 350ms;
}

问题一图

‘

问题2代码

import LocomotiveScroll from 'locomotive-scroll';

const lscroll = new LocomotiveScroll({
    el: document.querySelector('#js-scroll'),
    smooth: true,
    // reloadOnContextChange: true,
    lerp: 0.06,
    // smoothMobile: true
});

export { lscroll };

Answer 1

该回答引用ChatGPT
问题一：让字体跟画布同比例大小
要让字体跟画布同比例大小，可以使用CSS的`vw`和`vh`单位，它们是相对于视口宽度和高度的单位，可以根据视口大小自动调整元素大小。具体实现方法是将字体大小设置为相对于画布宽度的百分比，例如：

css
.title__top {
  font-size: 5vw; /* 相对于画布宽度的5% */
}

这样就可以保证在不同视口下字体大小与画布大小同比例。
问题二：在vue3全网页中进行顺滑滚动
要在vue3全网页中使用LocomotiveScroll进行顺滑滚动，可以在`main.js`中创建一个全局的LocomotiveScroll实例，并将其挂载到Vue实例上，例如：

js
import LocomotiveScroll from 'locomotive-scroll';
const lscroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  lerp: 0.06,
});
createApp(App)
  .use(router)
  .provide('lscroll', lscroll) // 将lscroll实例挂载到Vue实例上