Как реализовать размер жидкого шрифта с помощью чистого CSS

У меня есть текст, завернутый в <div> s, и хотел бы сделать всю текучую среду, включая размер шрифта текста, т.е. текст изменяет размеры в ответ на размер содержащего элемента.

Я наткнулся на Javasript + CSS решение, но просто интересно, можно ли это сделать с помощью чистого CSS?

Ответ 1

Да, посмотрите медиа-запросы CSS 3. Вы можете предоставить различные правила стиля в зависимости от ширины окна просмотра. Это включает в себя изменение размера шрифта.

Ответ 2

Пока Джим предоставил вам точную информацию, он отвлекается от вопроса, заданного слегка. Отзывчивый дизайн (запросы @media) может изменять текст в соответствии с размером экрана. Насколько я понимаю, вы спрашивали, существует ли чистое решение CSS для жидкостного текста (постоянное изменение размера текста при изменении размера окна).

Вот ссылка на css-трюки для объяснения новых методов калибровки шрифтов. Имейте в виду, что это новые и старые браузеры, скорее всего, будут иметь некоторые проблемы, а еще более новые (Chrome + Safari) по-прежнему не являются ошибками.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Редактируемый код

Ответ 3

Короткий ответ

У вас не может быть размеров флюида, но вы будете, когда длины в окне просмотра будут доступны.

Длинный ответ

Вы должны понимать эти два термина: отзывчивый и жидкость.

Отзывчивый означает, что ваша таблица стилей будет отличаться от разных размеров окна. Это делается с помощью CSS Media Queries. Хотя отзывчивость является одним из самых сложных слов в веб-дизайне, это в основном означает hardcoding CSS для разных абсолютных длин, пока вы не снимете скуку.

Fluid означает, что вы работаете с единицами относительной длины, такими как проценты. Когда вы работаете с единицами относительной длины, каждый размер рассчитывается автоматически.

Пример

Скажем, у вас есть <div> внутри тела документа, и вы хотите, чтобы он заполнил половину окна.

Решение отзывчивое таково:

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */

И решение жидкость:

body > div {
  width: 50%;
}

Так?

То, что ограничивает нас сегодня, заключается в том, что нет широкой поддержки единиц измерения относительной длины. Что вы можете сделать, так это отказаться от всей идеи "чистых размеров шрифта CSS жидкости" и перейти отзывчивый.