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

我的显示器是1024x768px。我在this site

上测试了该页面

如果测试尺寸为1024x768或更小，似乎没问题，但如果测试尺寸较大（例如1660x1050），顶部菜单上的文字会变得很小且不可读。

我尝试了百分比和视口字体大小 - 没有结果。大屏幕上的菜单总是无法读取，然后是1024x768。

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

btw，如果文字在较大的显示屏上变小，为什么文字在小显示屏上不会变大？

您可以看到我的实时测试页here

Answer 1

尝试使用em指定字体大小

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

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

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

Link to this

在大型显示器上，文字变得不可读

1 个答案: