2

使用新的vmincss 属性来获得正确的字体大小。工作绝对很棒！

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

调整页面大小时会出现问题。例如，如果页面变小，font-size则 保持不变，从而使所有内容变得不平衡。

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

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

4

3 回答 3

2

它看起来像是vmin在 Firefox 中的行为。

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

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

还有一点要记住：目前对vmin移动浏览器的支持非常有限，所以当用户在纵向和横向之间旋转时，这将是一个问题。

于 2013-02-22T08:49:35.440 回答
1

据说这是一个已知的错误，如 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);
});
于 2013-02-22T08:34:08.327 回答
0

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

于 2013-10-17T03:21:34.640 回答