Javascript 如何在浏览器上强制重新绘制div？

我正在实现一个css来根据窗口大小调整字体大小

它可以无缝地在Chrome中工作，但是调整大小只能在Safari中进行页面刷新

我相信这是css使用rem单元的根本原因，我看到Safari已经注意到了这方面的问题

这让人感觉很不舒服，但我能想到的唯一解决方案是强制重新绘制包含页面上字体的div。有人能推荐一个整洁的js来做这件事吗

这是css

非常感谢

  box-sizing: border-box;
}


html {
        height: 100%;
    padding: 0;
    margin: 0;
  font-family: 'source-serif-pro', sans-serif;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: 'source-serif-pro', serif !important;
}

body {
  text-align:center
}

pre {
  font-size: 12px;
  padding: 10px;
  background: white;
  border: solid 1px #777;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
  border: 1px solid #666;
}

td, th {
  padding: 0.25rem .5rem;
  border: 1px solid #666;
}

* {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  height: 100%;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html {
  font-size: 0.8rem;
}
@media screen and (min-width: 10rem) {
  html {
    font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));   }
}
@media screen and (min-width: 100%) {
  html {
    font-size: 2rem;
    -webkit-text-size-adjust:none; 

  }


}

body {
  line-height: 1.5rem;
  margin: 0 auto;
}

p {
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 400;
  margin-bottom: 0.7rem;
}

h1 {
  font-size: 0.5rem;
  line-height: 0.5rem;
  margin-top: calc((1.5rem - 1rem) + 1.5rem);
}

h2 {
  font-size: 0.3rem;
  line-height: 0.5rem;
  margin-top: calc((0.3rem - 0.3rem) + 0.3rem*2);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25rem;
  margin-top: calc((1.5rem - 1.25rem) + 1.5rem*2);
}

h4 {
  font-size: 1rem;
  line-height: 1rem;
  margin-top: calc((1.5rem - 1rem) + 1.5rem*2);
}

h5 {
  font-size: 0.2rem;
  line-height: 0.2rem;
  margin-top: calc((1.5rem - 0.875rem) + 1.5rem*2);
}

---

可以在调整窗口大小时使用事件侦听器

window.onresize = function(event) {
    ...
};

您可以尝试使用视口单位

vw, vh 1vw = 1% of viewport width 1vh = 1% of viewport height

---

这将在不使用javascript方法的情况下起作用。

我发现有一个函数在需要强制重新绘制的奇怪情况下非常有用，但您可能希望发布CSS，看看人们是否可以按照建议使用无JS的解决方案

function forceRepaint(el) {
  el.style.transform = 'scale(1)';
  requestAnimationFrame(function () {
    el.style.transform = '';
  });
};

---

您可能希望在一个取消公告的窗口大小调整处理程序中运行此操作。

Hm，为什么不在此处发布您的CSS，也许有人可以帮助您在不需要借助JS的情况下使其工作？