css - 如何为特定的单个元素设置固定的字体大小/防止浏览器缩放？

Question

我希望导航栏中的字体为固定大小 - 不受浏览器字体大小更改的影响。我完全可以接受其余的文字流畅，但我的网站设计是这样的，我需要导航栏文字无论如何都保持相同的大小。

这是我想做的一个例子。不知道这是怎么做到的。右上角的导航栏不受字体大小增加/减少的影响。如果有人能提示我，将不胜感激！:)

另外，我不想使用图像，因为我想要的下拉菜单不适用于图像映射。或者至少，我宁愿不走那条路。

score 0 · Accepted Answer

您可以尝试使用文本大小调整：

 -webkit-text-size-adjust:none;
 -ms-text-size-adjust:none;
 -moz-text-size-adjust:none;
 text-size-adjust:none;

它只适用于移动设备。

除此之外，我认为唯一的选择是让您的布局在不同的缩放级别上运行良好。

score 0 · Accepted Answer

0

<ul id="navbar" style="font-size:14px">

</ul>

于 2013-11-11T23:53:42.207 回答

score 0 · Accepted Answer

由于可访问性问题，我们不应该使用它。如果您将字体设置为“固定”大小，那么那些将系统字体设置为 200% 或者浏览器缩放到 100% 以上等的人，因为他们近视，将无法放大字体并阅读内容你打算为他们。

话虽这么说，当确实需要这样做时（在这方面我也不是无辜的），有点令人满意的解决方案很简单。

根据屏幕大小使用字体大小，但最好只在大屏幕上这样做。

@media screen and (min-width: 992px) {
    element {
        /* font-size: 2.5vh; */
        font-size: 2.5vw;
    }
}

score -1 · Accepted Answer

-1

尝试使用像素作为字体大小。

于 2013-11-11T23:52:39.260 回答

4 回答 4