Правильное использование единиц rem

216
26 апреля 2018, 07:09

Допустим, я указываю все размеры шрифтов в rem единицах, далее я при определенном размере экрана задаю уменьшение шрифта, но выходит так, что шрифты, которые до этого уже были маленькими, стали еще меньше, до такой степени, что они более нечитабельны.

Вот пример:

html { 
  font-size: 10px; 
} 
 
h1 { 
  font-size: 4rem; 
} 
 
h2 { 
  font-size: 3rem; 
} 
 
h3 { 
  font-size: 2.5rem; 
} 
 
h4 { 
  font-size: 2rem; 
} 
 
p { 
  font-size: 1.4rem; 
} 
 
@media screen and (max-width: 600px) { 
  html { 
    font-size: 6px; 
  } 
}
<html> 
  <h1>Simple text</h1> 
  <h2>Simple text</h2> 
  <h3>Simple text</h3> 
  <h4>Simple text</h4> 
  <p>Simple text</p> 
</html>

Вопрос в том, что делать в таких случаях? Как правильно поступать? Для маленьких шрифтов задавать значения размера в абсолютных величинах?

Answer 1

Подходов для динамической типографики может быть много, я бы на вашем месте обратил внимание не возможности функции calc() и, может быть, на зависимость размера шрифта от ширины экрана — простейшая формула font-size: calc(1rem + 1vw), с деталями коэффициентов надо уже экспериментировать. Также можете поинтересоваться темой CSS-шлюзов.

В вашем конкретном случае получается так, что вы задаете базовый размер шрифта 6 пикселей — потому естественно, что текст будет очень мелким. Вот пример, как этого частично можно избежать с применением функции calc() и цсс-переменных. Надо добавить увеличивающий коэффициент к тем значениям, которые становятся слишком мелкими на маленьких экранах, в то время как на больших оставить его равным единице.

html { 
  font-size: 10px; 
  --font-ratio: 1; 
} 
 
h1 { 
  font-size: 4rem; 
} 
 
h2 { 
  font-size: 3rem; 
} 
 
h3 { 
  font-size: 2.5rem; 
} 
 
h4 { 
  color: red; 
  font-size: calc(2rem * var(--font-ratio)); 
} 
 
p { 
  color: red; 
  font-size: calc(1.4rem * var(--font-ratio)); 
} 
 
@media screen and (max-width: 600px) { 
  html { 
    font-size: 6px; 
    --font-ratio: 1.25; 
  } 
}
<html> 
  <h1>Simple text</h1> 
  <h2>Simple text</h2> 
  <h3>Simple text</h3> 
  <h4>Simple text</h4> 
  <p>Simple text</p> 
</html>

READ ALSO
Как двухмерный python массив преобразовать в HTML таблицу?
HTML

Как двухмерный python массив преобразовать в HTML таблицу?

Надеюсь сегодня у вас отличное настроение, но перейдем к сути вопроса

 203
Javascript работа с чекбоксами, не обычный вопрос
HTML

Javascript работа с чекбоксами, не обычный вопрос

Помогите, ломаю голову уже который день надо этим, в общем, есть html:

 359
Как адаптивно делать такие блоки?
HTML

Как адаптивно делать такие блоки?

 214
Нужна помощь по иконкам
HTML

Нужна помощь по иконкам

Пишу мобильную версию сайта и столкнулся с проблемой:

 203