Отзывчивая типография - текст слишком мал

Question

Я пытаюсь сделать мою типографию отзывчивой, но я думаю, что я делаю что-то неправильно. Почему размер текста настолько мал на 90% и 80%?

body { 
    font-size: 100%;  /* flexible baseline */ 
    font-size: 1.375em; /* 22px */ 
    line-height: 1.4; 
} 

@media (max-width: 899px) { 
    body { 
     font-size: 90%; 
    } 
} 

@media (max-width: 480px) { 
    body { 
     font-size: 80%; 
    } 
} 

100%

90%

80%

Answer 1

Размера становится слишком мал, потому что это 90% и 80% от 16px (размер шрифта браузера по умолчанию). Если поместить базовый размер шрифта в body элемента он перезаписывается при медиа-запросов пинки в

Делают это так:.

html {font-size: 1.375em; /* 22px */} 

body { 
    font-size: 100%;  /* flexible baseline */ 
    line-height: 1.4; 
} 

Если вы установите корневой элемент (html) до желаемого базового размера вы может использовать процентные значения тега body для изменения размера текста в различных медиа-запросах.

Answer 2

У меня есть чувство font-size: 100% как-то переписывает font-size: 1.375em; в запросе на медиа. Проверьте DevTools для проверки. Лучший подход:

font-size: 137.5%; 

И набор медиа-запрос, например:

font-size: 0.9em; 

При установке процента в запросе медиа это, очевидно, происходит от базовой линии.

Answer 3

Это мало, потому что это 90% или 80% от размера шрифта по умолчанию браузера (если вы не задали размер шрифта на корневом элементе). Вот как работает CSS. В первом правиле объявление font-size: 100% не имеет эффекта, а второе объявление устанавливает размер шрифта в 1,375 раза больше основного размера шрифта, а ваши правила @media переопределяют это значение, когда ширина области просмотра не превышает 480 пикселей. Они не устанавливают размер шрифта до 80% или 90% от ширины, заданной с помощью font-size: 1.375em, так как это объявление полностью переопределено.

Простейшим решением является установка всех размеров по сравнению с размером шрифта по умолчанию браузера. Если вы хотите, размеры, чтобы быть 90% или 80% от 1,375 раза размера по умолчанию, вам просто нужно рассчитать немного, получая следующее:

body { 
    font-size: 137.5%; 
    line-height: 1.4; 
} 

@media (max-width: 899px) { 
    body { 
     font-size: 123.75%; 
    } 
} 

@media (max-width: 480px) { 
    body { 
     font-size: 110%; 
    } 
}