Question

我不想在我的字体中使用vw，因为许多浏览器和设备都不支持它。所以我想使用Javascript代替vw，以便在调整屏幕大小时我的字体大小发生变化。任何人都可以提供完整代码吗？请给我一个完整代码的完整示例，然后我自己做:)谢谢。

Answer 1

超级简单的例子。您需要向窗口添加resize事件侦听器，然后根据屏幕大小（innerWidth），您可以更改元素的样式。

（以全页模式运行示例）

编辑：在每个窗口调整大小时添加调整大小的文本。更改fontSize以设置初始大小。

＆＃13;

let fontSize = 38;
let lastWidth = 0;

window.addEventListener('resize', e => {

  if(window.innerWidth < lastWidth) {
    fontSize = fontSize - 2;
    document.querySelector('span').style.fontSize = `${fontSize}px`;
  } else {
    fontSize = fontSize + 2;
    document.querySelector('span').style.fontSize = `${fontSize}px`;
  }
  
  lastWidth = window.innerWidth;
});

＆＃13;

span {
  font-size: 38px;
}

＆＃13;

<span>Text Size</span>

＆＃13;

想要使用Javascript代替vw我的字体大小

1 个答案: