Question

使用新的vmin css属性来获得正确的字体大小。工作非常棒！

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

调整页面大小时会出现问题。例如，如果页面变小，font-size就会保持不变，从而使所有内容都无法使用。

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

第二，处理它的最佳方法是什么？似乎如果我使用触发器来设置font-size，那么我需要知道javascript以及css中的字体大小值，从而创建一个必然会失败的情况

Answer 1

看起来vmin在Firefox中表现得很好。

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

听起来你在Chrome中看到了这个问题？正如Bazzz指出的那样，Chrome bug仍然是开放的。我能够在金丝雀复制它。如果您愿意，CSS Tricks article可以帮助您使用一些JavaScript来解决问题。

要记住的另一件事是：移动浏览器中对vmin的支持是very limited at this time，因此当用户在纵向和纵向之间轮换时，这将是一个问题。景观。

Answer 2

据说这是一个已知的错误，正如CSS-Tricks所述。他们也有一个javascript解决方法，看看头部“Bugs！”：

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);
});

Answer 3

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

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

3 个答案: