Em css что это

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д.

Используйте em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

div.mybox < border: 2px solid >@media (min-resolution: 2dppx) < /* Media with 2 or more dots per px */ div.mybox < border: 1.5px solid >>

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p < margin-left: 1em >h1
p < margin-left: 1rem >h1

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49

CSS Font-Size: em vs. px vs. pt vs. percent

Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

Знакомьтесь — единицы

1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Итак, в чем же разница?

Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.

Изменение Font-size от 100% до 120%.

Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.

«em» vs «%»

Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.

В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body ), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).

Размер шрифта, когда клиент изменяет размер текста в браузере.

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.

Вердикт

В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.

Победитель: процент (%).

Что такое px, rem, em, fr, %

Единицы измерения в CSS используют для определения размеров элементов, расстояний, шрифтов и других свойств. Они делятся на абсолютные и относительные.

Абсолютные единицы измеренияпривязаны к настоящим физическим размерам. Среди них пиксели, сантиметры, миллиметры, дюймы.

Относительные единицы измеренияописывают значения, которые зависят от других значений. Среди них em , rem , vh , ex и другие единицы измерения.

В статье расскажем про пять единиц измерения: px , em , rem , fr , % .

Для чего использовать

px

• Задаёт ширину и высоту элементов: width: 200px; , height: 100px; .
• Задаёт отступы и поля: margin: 10px; , padding: 20px; .
• Задаёт размер шрифта: font-size: 16px; .

rem и em

• Размер шрифта: font-size: 1.5rem; , font-size: 1.2em; .
• Отступы и полей с учетом размера шрифта: margin: 0.5rem; , padding: 0.8em; .

• Размер элементов относительно размеров родительского элемента: width: 50%; , height: 75%; .
• Отступы и поля относительно размеров родительского элемента: margin: 10%; , padding: 5%; .

fr

• Распределение пространства между ячейками сетки: grid-template-columns: 1fr 2fr; — распределит доступное пространство между двумя колонками в соотношении 1:2.
• Распределение пространства между элементами в гибком контейнере: flex: 1fr; — распределит доступное пространство между элементами в контейнере.

Подробнее о каждой единице

Пиксели px

Пиксель бывает физическим и CSS-пикселем.

Физический пиксель — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px , то подразумеваем, что по всей ширине находится 480 неделимых ячеек, где 1px равен одной ячейке.

CSS-пиксель — это единица измерения CSS, равная 1/96 части дюйма. Один пиксель не всегда равен одной ячейке на экране. Это зависит от плотности экрана, чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение.

Размер от шрифта root rem

Единица измерения, которая зависит от размера шрифта корневого элемента в документе — обычно . Значение 1rem соответствует размеру шрифта корневого элемента. Например, если в теге задан шрифт 16px , то для всех вложенных в него элементов font-size: 1.5rem; установит размер шрифта в 24px .

em

Единица измерения, которая задаёт размер шрифта равный родительскому элементу. Например, если у родительского элемента размер шрифта равен 16px , то font-size: 1.5em; установит размер шрифта дочернего элемента в 24px .

Для значение 2em означает, что размер шрифта будет в два раза больше, чем размер шрифта элемента-родителя.

Проценты %

Проценты задают размер относительно родительского элемента. Родительский элемент равен 100% , тогда width: 50%; будет равна половине ширины родительского элемента.

Контейнер занимает 80% ширины родительского элемента, а блок-коробка занимает 50% ширины контейнера.

Доли fr

Доля свободного пространства — относительная единица измерения, которая используется в CSS Grid для распределения доступного пространства между ячейками. Свободное пространство в родительском элементе делится на равные доли — fr , а дочерние элементы распределяют пространство между собой. На примере мы покажем, как пространство делится между элементами.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Единицы измерения CSS — PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH

Абсолютная единица — не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.

Относительная единица — зависит от того или иного значения других свойств.

PX — пиксели

Абсолютная (фиксированная) единица. Значение заданное в пикселях (px), четкое и понятное.

Как правило, в макетах дизайна мы видим размеры именно в пикселях. Поэтому, используя эту единицу мы легко можем переносить данные в код с точностью пиксель перфект. Это когда макетные размеры совпадают с версткой на все 100%.

Остальные единицы, так или иначе пересчитываются браузером все равно в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px.

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 20px;)
Живи, а работай в свободное время! (задан font-size: 17.5px;)
Подписывайся! (наследует font-size: 17.5px;)
Ставь лайк! (задан font-size: 14.7px;)
И комментарий напиши! (задан font-size: 25px;)
width: 200px;
height: 200px;
padding: 15px;

Преимущества

Чёткость, понятность, простота использования.
Подходит для начинающих.

Недостатки

По сравнению с другими, относительными единицами это усложняет нам работу при адаптиве, а также снижает доступность нашей верстки, запрещая пользователю менять настройки в браузере

EM – относительна размеру шрифта

Относительная единица. Размер формируется относительно текущего или унаследованного размера шрифта (font-size).
1em равен значению font-size.

Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент.
Как и пиксели, значение EM можно указывать дробные.

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1em; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5em; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5em; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5em; 1.5*24 = 36px)
И комментарий напиши! (задан font-size: 0.8em; 0.8*24=19.2px)
Размер шрифта
по умолчанию 16px
width: 12.5em;
height: 12.5em;
padding: 0.9375em;

0.9375 * 16 = 15px

Размер шрифта
задан 20px (font-size:20px;)
width: 12.5em;
height: 12.5em;
padding: 0.9375em;
font-size: 20px;

0.9375 * 20 = 18.75px

Преимущества

Относительность EM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для указания размеров зависящих от размера шрифта. Также используется в медиа запросах.

Недостатки

по сравнению с PX, работать с EM более сложно, ведь для переноса данных из макета в единицы в EM требуются вычисления.

REM — относительна размеру шрифта браузера

Относительная единица. Размер формируется относительно размера шрифта (font-size) в теге или браузера по умолчанию.
1rem равен значению font-size в теге или браузера по умолчанию.
Можно указывать дробные числа, например 1.5rem

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1rem; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5rem; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5rem; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5rem; 1.5*16 = 24px)
И комментарий напиши! (задан font-size: 0.8rem; 0.8*16=12.8px)
Размер шрифта
по умолчанию 16px
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;

0.9375 * 16 = 15px

Размер шрифта
задан 20px (font-size:20px;)
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;
font-size: 20px;

0.9375 * 16 = 15px

Преимущества

Относительность REM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Более простое использование. Отлично подходит для указания размеров шрифтов.

Недостатки

По сравнению с PX, работать с REM более сложно, ведь для переноса данных из макета в единицы в REM требуются вычисления, но проще чем с EM.

% — проценты от .

Относительная единица. Можно указывать дробные числа, например 10.5%. Разные CSS свойства вычисляют процент относительно разных значений:

• Ширина width — относительно ширины родительного элемента
• Высота height — относительно высоты родительного элемента, но только если у него задана высота либо это флекс или грид элемент.
• При относительном позиционировании (position: relative; + top left bottom right) нужны те же условия.
• Для абсолютно позиционированных объектов — относительно высоты родительского элемента. При этом, задавать высоту родителю не обязательно.
• Отступы padding \ margin — относительно ширины родительного элемента, даже если задаются вертикальные отступы.
• transform: translate(x, y) — относительно ширины \ высоты самого объекта к которому применено свойство.
• font-size и line-height — относительно размера свойства font-size

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
И комментарий напиши!
 
 
 

Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 100%; 16/100*100=16px)
Живи, а работай в свободное время! (задан font-size: 150%; 16/100*150=24px)
Подписывайся! (наследует font-size: 150%; 16/100*150=24px)
Ставь лайк! (задан font-size: 150%; 24/100*150=36px)
И комментарий напиши! (задан font-size: 80%; 24/100*80=19.2px)
Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 50%;
padding: 5%;
margin: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Внешние отступы: 400/100*5 = 20px

Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 70%;
padding: 5%;
position: relative;
left: 10%;
top: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*70 = 210px

Внутренние отступы: 400/100*5 = 20px

Вправо: 400/100*10 = 40px

Вниз: 300/100*5 = 15px

Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 70%;
height: 50%;
padding: 5%;
transform: translate(10%, 5%);

Ширина: 400/100*70 = 280px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Вправо: 280/100*10 = 28px

Вниз: 150/100*5 = 7.5px

Преимущества

Относительность процентов позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для построения относительных конструкций и позиционирования объектов.

Недостатки

Требуют хорошего знания теории и четкого понимания — процент от чего вычислятестя в тот или иной момент

VW, VH, VMIN, VMAX — относительно окна (вьюпорта) браузера

Все они так или иначе работают относительно окна браузера, так называемого вьюпорта.
Вьюпорт, простыми словами, это вот эта рамка через которую мы просматриваем сайт.

Итак VW работает относительно ширины вьюпорта, VH относительно высоты вьюпорта.
VMIN — относительно наименьшего значения из (VW, VH). VMAX — относительно наибольшего значения из (VW, VH).

100vw равно ширине окна браузера (вьюпорта), 100vh равно высоте окна браузера (вьюпорта).
100wmin равно наименьшему из (vw, vh), 100vmax равно наибольшему из (vw, vh)

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

 
Обычный текст 
Привет! Это Фрилансер по жизни! 
Живи, а работай в свободное время! 
Подписывайся!
 
Ставь лайк!
 
 
И комментарий напиши!