根据视口尺寸反应原生字体 - Javascript

在响应式设计中，字体大小的适配是一个很重要的问题。通常情况下，我们会使用CSS中的@media查询来设置不同屏幕尺寸下的字体大小。然而，由于屏幕尺寸和分辨率的多样性，可能需要运用JavaScript来根据视口尺寸反应原生字体。

实现步骤

1. 首先需要使用window.innerWidth获取视口宽度，并用Math.min()方法取得宽度和字体大小之间的较小值，保证字体不会过大。
2. 然后就可以通过document.getElementsByTagName方法遍历DOM节点，并使用element.style.fontSize来设置字体大小。

function setFontSize() {
  const vw = Math.min(document.documentElement.clientWidth, window.innerWidth || 0);
  const fontSize = vw / 100;
  const elements = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.fontSize = fontSize + 'px';
  }
}

window.onload = setFontSize;
window.onresize = setFontSize;

注：由于此代码片段是用于更改字体大小的，因此将字体大小设置为视口宽度除以100。

结论

使用JavaScript可以使字体大小适应于各种设备和屏幕尺寸。本例中使用的是简单的遍历节点并设置字体大小的方法，但使用CSS自定义属性和CSS变量等方法也可以实现相似的效果。

参考链接：

• How to Dynamically Resize Text with JavaScript