Текст становится нечитаемым маленьким на большом дисплее

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. Я проверил страницу на этом сайте

Кажется нормальным, если тестируемый размер 1024x768 или меньше, но если тестируемый размер больше (например, 1660x1050), текст в верхнем меню становится маленьким и нечитаемым.

Я пытался с процентами и размером шрифта области просмотра - безрезультатно. Меню всегда не читается на большом экране, чем 1024x768.

Итак, как я могу сохранить читабельность текста на мониторах всех размеров.

Кстати, если текст становится меньше на большом дисплее, почему текст не становится больше на маленьком дисплее?

Вы можете увидеть мою тестовую страницу здесь

Answer 1

Попробуйте использовать em for specifying the font size

Другой способ установить размер шрифта - использовать значения em. Размер значения em является динамическим. При определении свойства font-size em равно размеру шрифта, который применяется к родительскому элементу рассматриваемого элемента. Если вы нигде не указали размер шрифта на странице, то это браузер по умолчанию, который, вероятно, составляет 16 пикселей. So, by default 1em = 16px, and 2em = 32px. Если вы установите размер шрифта 20px для элемента body, то 1em = 20px и 2em = 40px. Обратите внимание, что значение 2 по сути является множителем текущего размера em.

Чтобы рассчитать их эквивалент для любого требуемого значения пикселя, вы можете использовать эту формулу:

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

Link to this