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

Читайте также

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

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *