缩放时保持文本大小相同

Question

我想在页面顶部画一条不能缩放的线。既不是行，也不是其中包含的文本。主要问题是文字。每当我放大浏览器时，线条保持相同的高度，但其中的文本会增长，并从线条中消失。

有什么我可以使用的css命令吗？

我已经尝试过font-size-adjust: none; 和-webkit-text-size-adjust: none;，但都没有奏效。

这是我尝试做的fiddle。

Answer 1

您实际上可以通过使用视口单位来解决缩放问题。这是小提琴：http://jsfiddle.net/TnY3L/。此外，我使用视口单位制作了我的个人网站，当您使用 Ctrl + 或 Ctrl - 键时，它没有缩放功能（请参阅http://www.functionalcss.com/）。旧版浏览器不支持 vw、vh、vmin、vmax。我通过使用 polyfill 解决了这个问题：http://html5polyfill.com/

HTML：

<div id = "header">This is a header</div>

CSS：

#header {
    background-color: #ccc;
    height: 10vh;
    line-height: 10vh;
    font-size: 5vh;
    text-align: center;
}