Html 在css中，当页面大小改变时使用vmin/vmax属性

使用新的

vmin

css属性获得正确的字体大小。真是太棒了

div.sample { font-size: 1.5vmin; text-align: center; ... }

调整页面大小时会出现问题。例如，如果页面变小，

字体大小

将保持不变，使所有内容都不协调

首先，浏览器应该处理这个问题吗

---

第二，最好的处理方法是什么？似乎如果我使用触发器来设置

font size

，那么我需要知道

javascript

中的字体大小值以及

css

，这会造成一种注定失败的情况。

这应该是一个已知的错误，正如css技巧所述。他们也有一个javascript解决方案，看看这里的“Bugs！”：

CSS技巧建议的解决方法

要解决此问题（允许在不刷新页面的情况下调整大小），您需要 在元素上导致“重新绘制”。我使用jQuery，只是摆弄一下 每个元素（在本例中不相关）的z索引值 重新油漆

---

看起来，

vmin

正在Firefox中运行

下面是我为测试制作的JSFIDLE：

听起来你在chrome上看到了这个问题？正如巴兹所指出的，还有一个问题仍然悬而未决。我能在金丝雀身上复制它。如果您愿意的话，可以使用一些javascript来帮助您解决这个问题

---

另一件需要记住的事情是：在移动浏览器中支持

vmin

，因此当用户在纵向和横向之间切换时，这将是一个问题。

vmin对于移动网页设计是一个好主意，但浏览器支持有限。此外，确实存在的浏览器支持表现出一些奇怪的行为。例如，因为vmin根据屏幕的当前大小计算字体大小，所以当您关注文本输入元素时，您会遇到问题，因为有时文本会根据键盘打开时的小窗口调整大小。所以有时候你的文本输入会自动变得很小，这让人非常恼火。因此，我建议使用vw，根据屏幕宽度保持文本大小。它有助于获得更好的用户体验。vh和我上面提到的问题是一样的

causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
    causeRepaintsOn.css("z-index", 1);
});