javascript - 如何强制 div 在浏览器调整大小时重绘？

Question

我正在实现一段 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);
}

Answer 1

您可以在窗口调整大小时有一个事件监听器。

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

您可能想尝试使用视口(viewport)单位。

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

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