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) {
    ...
};

您可能想尝试使用视口单元。

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

这无需使用javascript方法即可工作。

Answer 2

这是我发现的一种功能，在有必要的奇数情况下可以强制重涂，但是您可能想发布CSS，看看人们是否可以按照建议使用无JS解决方案。

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

您将要在一个防抖的窗口调整大小处理程序中运行它。

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

2 个答案: