Адаптивные размеры шрифта: какие значения подходят? - PullRequest
Новая
       5

Адаптивные размеры шрифта: какие значения подходят?

0 голосов
/ 23 апреля 2019

Сейчас я занят адаптивными размерами шрифтов.То, как подразумеваются такие единицы, как vh, vw, vmin, мне ясно.

Но я не могу что-то убедительно сделать с ними.Они могут быть как большими на большом экране, так и маленькими на маленьких экранах.Или наоборот.

Существуют ли какие-либо общие правила, какие значения являются подходящими?

Например: h1 должно быть 2vw, h2 должно быть 1.5vw, p должно быть1vw и так далее ...

Должен ли я использовать vw или vh и почему?

1 Ответ

1 голос
/ 23 апреля 2019

Hackape правильно в своем комментарии, что это не вопрос кода. Но чтобы ответить на реальный вопрос «Какие значения являются подходящими» в смысле кода, тогда ответ на все из них.

Вы можете использовать vw, чтобы увеличить или уменьшить ваши шрифты в зависимости от ширины области просмотра. В качестве альтернативы вы можете использовать vh для увеличения / уменьшения в зависимости от высоты.

Что касается вашего мнения о том, чтобы быть слишком большим или слишком маленьким, у вас есть как минимум два варианта.

Медиа-запросы

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

p {
  font-size: 2vw;
}

@media (min-width: 600px) {
  p {
    font-size: 1vw;
  }
}

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

CSS Locks

Хорошей альтернативой этому является метод, называемый CSS Locks. На самом деле это не часть CSS, а формула для CSS Calc, которая, как известно, очень хорошо работает для задания минимального и максимального размеров шрифта.

Есть несколько хороших статей о блокировках CSS, одна из которых Флоренс Вершельде «Математика блокировок CSS» .

Вот пример из CSS-Tricks 'Fluid Typography : 

p {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Как видите, медиазапросы не используются. И если вы хотите использовать vw или vh, вы можете.

...