[Из песочницы] Отзывчивый размер шрифта
Уверен, что никому не нужно объяснять почему сайты должны быть гибкими и адаптивными. Все используют проценты и медиа-запросы в своей верстке. Сейчас это уже стандарт.
Но типографика до недавнего времени не была столь гибкой. Все что мы могли — изменять размеры шрифта от брейкпоинта к брейкпоинту. В таком случае мы получали скорее адаптивную типографику нежели отзывчивую. Для каждого медиа-запроса нужно задавать свои значения. Можно конечно использовать компонентный подход с относительными размерами шрифта, что может существенно ускорить процесс редактирования, но принципиально это ничего не меняет. При перемещении компонента в другое место нужно будет опять пробегать по всем медиа запросам и подставлять новые значения.
Но потом появились они — vw, vh, vmin, vmax — единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.
Читать дальше →
Источник: Уроки CSS на Хабрахабре
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Перевод] Варианты использования вертикальных медиа-запросов в css
Мало кто знает, что в глубинах CSS спецификаций, кроме привычных «горизонтальных» медиа запросов, например, max-width: 768px, существуют ещё и «вертикальные». Примеры их использования не так... читать далее
[Перевод] Медиа-запросы в адаптивном дизайне 2018
В июле 2010 года я написала статью «Как использовать CSS3 медиа-запросы для создания мобильной версии вашего сайта» для журнала Smashing. Спустя почти восемь лет эта статья по-прежнему очень... читать далее
[Из песочницы] Максимальная адаптивность с минимальным количеством медиа запросов, или метод обратной адаптивности
"У всякой проблемы всегда есть решение — простое, удобное, и конечно ошибочное". — Генри Луис Менкен. Суть проблемы На первый взгляд реализация адаптивной верстки может показаться «линейным квестом »... читать далее
[Из песочницы] «Font-weight: bolder» для шрифтов со множеством начертаний
Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы теги strong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700, как это происходит... читать далее
[Перевод] Адаптивная типографика с помощью математики
Адаптивный (резиновый) дизайн является нормой фронтэнд-разработки уже давно. Однако идея гибкой адаптивной типографики является относительно новой, которую еще предстоит изучить. Вплоть до недавнего... читать далее
[Перевод] Новые (и старые) единицы измерения в CSS, о которых вы вряд ли слышали
В последнее время JavaScript развивается очень быстро, но и языки-помощники веб-разработчика не стоят на месте. CSS тоже развивается, и хотя Houdini в скором времени, возможно, сделает прорыв в... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте
бентли прокат на свадьбу