CSS3 — единицы измерения шрифтов для адаптивности

css3 font sizes - CSS3 — единицы измерения шрифтов для адаптивности

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

font-size: 100%;
font-size: 0.75em;
font-size: 0.75rem;

em и rem – схожи, но первый будет уменьшать шрифт с каждым новым вложением от родительского элемента, а второй берет свои размеры от корневого

<div><div>уменьшится дважды для em и один для rem</div></div>

А вот еще парочка занятных разметок в зависимости от размера браузера:

1vw — 1% ширины устройства отображения.
1vh -  1% высоты устройства отображения.
1vmin — наименьшее значение из 1vw и 1vh.

например, для экрана 1000х1200px:

1.5vw = размер шрифта 15px
1.5vh = размер шрифта 18px
1.5vmin = минимальное значение из 1.5vw и 1.5vh = 15px

Похожие записи



Deprecated: Функция WP_Query вызвана с аргументом, который считается устаревшим с версии 3.1.0! Параметр caller_get_posts считается устаревшим. Используйте ignore_sticky_posts. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Deprecated: Файл Тема без comments.php с версии 3.0.0 считается устаревшим. Альтернативы не предусмотрено. Пожалуйста, включите шаблон comments.php в вашу тему. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078

Добавить комментарий