在缩放时保持文本大小相同

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