如何定义随浏览器缩放级别缩放的字体大小？

Question

对于我的 web 应用程序，我正在尝试创建一个无论缩放级别如何都保持相同大小的 div。也就是说，如果我用真实世界的标尺测量 div 并且它是 3 英寸宽，那么无论我放大或缩小多远，它始终是 3 英寸宽。

我注意到，如果我定义根 html 文档的 font-size，那么我可以为该 div 及其所有子元素使用相对论 rem。

到目前为止，我最接近的是在 html 元素上设置 font-size: 1vh;。然后，每当我使用rem 单位时，无论缩放级别如何，div 及其内容都保持相同的大小，这是完美的。

此解决方案的唯一问题是它会随视口高度缩放。也就是说，如果你让你的窗口更短，元素的高度就会降低。同样，如果您将窗口设置得更高，则元素的高度也会增加。

这很糟糕，因为对于我的所有用户，无论他们的显示器尺寸如何，我都希望该项目具有相同的尺寸。也就是说，每个人的视口宽度、高度、显示器尺寸或其他任何因素都应该是 3 英寸宽。

我能想到解决这个问题的唯一方法是以某种方式检测浏览器缩放级别，然后使用 Javascript 修改 html 元素的 font-size 属性，但这种方法似乎是 extremely finicky而且它的工作效果不是很好的跨浏览器。

Answer 1

clamp() 会在这里帮助你吗？单独使用还是与您的window.devicePixelRatio 混合使用？

在等待评论区的反馈时，我在这里举了几个例子

html {
font-size:clamp(10px, 8vw, 0.35in); 
}
body {
width:20rem;
margin:auto;
text-align:justify;
}

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
    elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>

• js

function scaleFontSize() {
  let scaledFontSize = (8 / window.devicePixelRatio) + "vw";
  let doc = document.querySelector('html');
 
  doc.style.setProperty('--Device',  scaledFontSize);
}

window.onload=scaleFontSize;
 
// window.addEventListener('resize', scaleFontSize, true); No need , pixel ratio remains the same .

html {
font-size:clamp(10px, var(--Device, 10vw), 0.35in); 
}
body {
width:20rem;
margin:auto;
text-align:justify;
}

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
    elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>

Answer 2

我想通了，它似乎有效。除非有人提出更好的解决方案，否则可能会使用它：

function scaleFontSize() {
  let scaledFontSize = (16 / window.devicePixelRatio) + "px";
  
  document.documentElement.style["font-size"] = scaledFontSize;
}

scaleFontSize();

window.addEventListener('resize', scaleFontSize, true);