html - 文本在大显示器上变得小得难以辨认

Question

 <div id='divMenuT'>
    <div class='m1'><a href="index.php">Home</a></div>
    <div class='m1'>Archive</div>
    <div class='m1'>Cinema</div>
    <div class='m1'>Hora</div>
  </div>

CSS

#divMenuT{
    font-size: 14px;
}  

我的显示器是 1024x768 像素。我在 this site 上测试了页面

如果测试尺寸为 1024x768 或更小似乎没问题，但如果测试尺寸更大(例如 1660x1050)，顶部菜单上的文本会变得很小且无法阅读。

我尝试了百分比和视口(viewport)字体大小 - 没有结果。菜单在比 1024x768 更大的屏幕上始终不可读。

那么，如何在所有显示器尺寸上保持文本可读。

顺便说一句，如果文本在较大的显示器上变小，为什么文本在小显示器上不会变大？

可以看到我的直播测试页面here

Answer 1

尝试使用 em 指定字体大小

另一种设置字体大小的方法是使用 em 值。 em 值的大小是动态的。定义 font-size 属性时，em 等于应用于相关元素父元素的字体大小。如果你没有在页面的任何地方设置字体大小，那么它就是浏览器的默认值，大概是 16px。因此，默认情况下 1em = 16px，2em = 32px。如果在 body 元素上设置 font-size 为 20px，则 1em = 20px 和 2em = 40px。请注意，值 2 本质上是当前 em 大小的乘数。

为了计算所需的任何像素值的 em 等效值，您可以使用以下公式:

em = desired element pixel value / parent element font-size in pixels

Link to this