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

Question

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

我注意到，如果我定义根 html 文档的 font-size，那么我可以使用相对论 rem 来表示 div 和所有它的子元素。

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

此解决方案的唯一问题是它随视口高度缩放。也就是说，如果您使 window 变短，元素的高度将降低。同样，如果您使 window 更高，则元素的高度将增加。

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

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

Answer 1

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

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

scaleFontSize();

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

Answer 2

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>

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

How to define a font size that scales with browser zoom level?

javascript

html

css

cross-browser

zooming