提问人：Atarian 提问时间：11/13/2023 最后编辑：Atarian 更新时间：11/13/2023 访问量：28
为什么 html 中的 font-size 有时会根据不同的视口动态变化，而有时则不会？
Why does the font-size in html sometimes dynamically changes based on different viewport and sometimes does not?
问：
我正在移动设备上测试我的一些 html 页面的可读性，发现在 html 的某些部分，我的文本在移动设备上会根据视口大小缩小（浏览器动态更改文本的字体大小值 - 没有 JavaScript，没有媒体查询，什么都没有......只是纯 html），而在其他部分则没有。
我试图了解我在代码中做了什么导致了这种情况，所以我开始逐步剥离我的代码，直到得到尽可能少的代码，该代码显示了它何时仍然进行动态调整和何时不再进行动态调整之间的阈值。
我最终得到了两个代码（见下文）：index.html 这样做，index2.html 不这样做。
您可以在以下情况下复制此行为：打开以下代码，转到 Chrome 中的开发者工具，选择设备模式，然后选择维度：响应式。现在，如果转到“计算”选项卡并搜索 font-size 值，则会看到所有标记（并且只有那些标记）在增加或减少模拟设备的宽度尺寸时动态更改 font-size 值。<li>
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul>
<li>
Title 1
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3 sssssss</a></li>
</ul>
</div>
</li>
<li>
Title 2
<div>
<ul>
<li>
<a href="#">Item 1</a>
</li>
</ul>
</div>
</li>
<li>
Title 3
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
Title 3 sssssssssssss
<div>
<ul>
<li>
<a href="#"
>Item 1 sssssssssss sssssssssss ssssssssssss</a
>
</li>
<li>
<a href="#"
>Item 2 ssssssssss ssssssssss ssssssssssssssss
sssssssssssss</a
>
</li>
<li>
<a href="#">Item 3 sssssss sssssssssssssssss</a>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
和 index2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul>
<li>
Title 1
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3 ssssss</a></li>
</ul>
</div>
</li>
<li>
Title 2
<div>
<ul>
<li>
<a href="#">Item 1</a>
</li>
</ul>
</div>
</li>
<li>
Title 3
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
Title 3 sssssssssssss
<div>
<ul>
<li>
<a href="#"
>Item 1 sssssssssss sssssssssss ssssssssssss</a
>
</li>
<li>
<a href="#"
>Item 2 ssssssssss ssssssssss ssssssssssssssss
sssssssssssss</a
>
</li>
<li>
<a href="#">Item 3 sssssss sssssssssssssssss</a>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
两个文件是相同的，只是第二个文件少了一个字符！“项目 3 ssssss”有 6 个 S 而不是 7。没有别的了。仅此而已！！<li>
我知道 Chrome 的设备模式只是对移动设备行为的模拟，所以为了确保这不仅仅是模拟中的一些故障，我在线上传了这两个文件，以便能够在真实的移动设备上进行测试：
有人能解释这一点吗？
如果我知道如何让我的任何代码像在第一个文件中一样故意动态更改字体大小，那将是一个很棒的功能，我不需要任何那些复杂的媒体查询。但在这一点上，它只是偶然发生的，我不明白为什么。
谢谢！
答： 暂无答案
评论