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

Question

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

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

我已经尝试过font-size-adjust: none;,-webkit-text-size-adjust: none;但没有一个能奏效.

这是我试图做的小提琴.

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