通过js进行修改：root的属性

//css
:root {
  --slide-ease: cubic-bezier(0.4, -0.3, 0.6, 1.3);
  /*   --slide-ease: cubic-bezier(.8,-0.3,.2,1.3); */
  --easing: var(--slide-ease);
  --speed: 0.5s;
  --width: clamp(150px, 500px, 100vw);
  --ar: 8 / 3;
  --ray: hsl(0 0% 100% / 0.5);
  --sun: hsl(47, 91%, 58%);
  --moon: hsl(212, 13%, 82%);
  --crater: hsl(221, 16%, 68%);
  --bg: hsl(219, 30%, 88%);
  --bear-speed: 10s;
  --color: hsl(219 30% 20%);
}

//js
//Attrs.width是通过父页面传递的变量
nextTick(() => {
  document.documentElement.style.setProperty(
    "--width",
    "clamp(150px," + Attrs.width + "px, 100vw)"
  );
});