Ответ 1
Да, посмотрите медиа-запросы CSS 3. Вы можете предоставить различные правила стиля в зависимости от ширины окна просмотра. Это включает в себя изменение размера шрифта.
У меня есть текст, завернутый в <div>
s, и хотел бы сделать всю текучую среду, включая размер шрифта текста, т.е. текст изменяет размеры в ответ на размер содержащего элемента.
Я наткнулся на Javasript + CSS решение, но просто интересно, можно ли это сделать с помощью чистого CSS?
Да, посмотрите медиа-запросы CSS 3. Вы можете предоставить различные правила стиля в зависимости от ширины окна просмотра. Это включает в себя изменение размера шрифта.
Пока Джим предоставил вам точную информацию, он отвлекается от вопроса, заданного слегка. Отзывчивый дизайн (запросы @media) может изменять текст в соответствии с размером экрана. Насколько я понимаю, вы спрашивали, существует ли чистое решение CSS для жидкостного текста (постоянное изменение размера текста при изменении размера окна).
Вот ссылка на css-трюки для объяснения новых методов калибровки шрифтов. Имейте в виду, что это новые и старые браузеры, скорее всего, будут иметь некоторые проблемы, а еще более новые (Chrome + Safari) по-прежнему не являются ошибками.
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Редактируемый код
У вас не может быть размеров флюида, но вы будете, когда длины в окне просмотра будут доступны.
Вы должны понимать эти два термина: отзывчивый и жидкость.
Отзывчивый означает, что ваша таблица стилей будет отличаться от разных размеров окна. Это делается с помощью 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 жидкости" и перейти отзывчивый.