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

【问题标题】：in css, using the vmin/vmax attribute when page size changes在 css 中，当页面大小改变时使用 vmin/vmax 属性
【发布时间】：2013-02-07 19:23:30
【问题描述】：

使用新的vmin css 属性来获得正确的字体大小。效果非常好！

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

调整页面大小时会出现此问题。例如，如果页面变小，font-size 将保持不变，从而使一切变得不平衡。

首先，浏览器是否应该处理这个问题？

其次，最好的处理方法是什么？看来，如果我使用触发器来设置font-size，那么我需要知道javascript 和css 中的字体大小值，从而造成一定会失败的情况。

【问题讨论】：

标签： html css resize viewport-units

【解决方案1】：

看起来 vmin 在 Firefox 中的行为。

这是我为测试而制作的 jsfiddle： http://jsfiddle.net/noahcollins/Sc8gm/

听起来您在 chrome 中看到了这个问题？正如 Bazzz 指出的那样，有一个 Chrome bug 仍然开放。我能够在 Canary 中复制它。如果您愿意，CSS Tricks article 可以帮助您使用一些 javascript 绕过它。

要记住的另一件事：移动浏览器中对vmin 的支持是very limited at this time，因此当用户在纵向和横向之间旋转时会出现问题。

【讨论】：

【解决方案2】：

据 CSS-Tricks 所述，这可能是一个已知错误。他们也有一个 javascript 解决方法，请查看“错误！”标题下的此处：

http://css-tricks.com/viewport-sized-typography/

CSS-Tricks 建议的解决方法

要解决此问题（允许在不刷新页面的情况下调整大小），您需要导致元素上的“重绘”。我使用了 jQuery，只是摆弄着每个元素（在这种情况下是不相关的）z-index 值，它触发重绘。

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

【讨论】：

【解决方案3】：

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

【讨论】：