Какие единицы измерения являются относительными. Как это можно использовать

В одной статье нет необходимости.

1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS - это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.

1 em = значению font-size родителя. Обратите внимание, что в полигоне ниже font-size жёлтого и коричневого блоков разный, а размер шрифта одинаковый.

16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 8px * 2 = 16px // коричневый

1 rem = значению font-size (корневого элемента документа).

16px * 1 = 16px // жёлтый 16px * 0,5 = 8px // зелёный 16px * 2 = 32px // коричневый

1 процент (1%) — значение относительно значения свойства родительского тега.

16px * 100% = 16px // жёлтый 16px * 50% = 8px // зелёный 8px * 200% = 16px // коричневый

При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.

1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl - .

1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl + или Ctrl - .

1vmin = 1vw или 1vh. Выбирается то, которое меньше.

1vmax = 1vw или 1vh. Выбирается то, которое больше.

font-size: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;

font-size: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;

font-size: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;

Функция calc()

Никогда не хотелось от процентов вычесть пиксели или емы? Например, для того, чтобы . Теперь это возможно. Функция calc() позволяет реализовать математические выражения

Добавление (символ отделяется пробелами с двух сторон) - вычитание (символ отделяется пробелами с двух сторон) * умножение / деление

Вот ещё один зачётный пример, .

• 1
• 2
• 3
• 4

Одним из наиболее запутанных аспектов 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 {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).

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

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

Вердикт

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

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

Приветствую Вас, уважаемые читатели блога webcodius! Для задания размеров различных элементов html страницы, в CSS существуют единицы измерения. Причем могут использоваться как относительные, так и абсолютные единицы.

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

Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:

Размер 12 миллиметров

Размер 1 сантиметр

Размер 1 дюйм

Размер 24 пункта

Размер 1 пика

Относительные единицы измерения

Для отображения информации на мониторе лучше использовать относительные единицы измерения. Так как физический размер точек (пикселей), образующих изображения на мониторе, может быть разным в зависимости от типа и физического размера этого самого монитора. Также размер пикселя зависит от установленного разрешения экрана. Основные относительные единицы:

1 px в CSS , как мы уже говорили выше, это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность.
При указании процентов размер вычисляется в зависимости от размера родительского элемента. Так, например если ширина родительского элемента 500px, то при указании width:50% ширина элемента будет 250px.

em привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. А ex это высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. То есть em также привязан к размеру шрифта, заданного в браузере по умолчанию или к размеру шрифта родительского элемента. Примеры:

Размер 20 пикселов

Размер 150%

Размер 2 em

Размер 2 ex

Результат:

Кроме вышеперечисленных, есть группа относительных единиц привязанных к размеру области просмотра браузера:

Примеры использования:

Размер 2 vw

Размер 2 vh

Размер 2 vmin

Размер 2 vmax

Функция calc ()

Используется для указания вычисляемого значения свойств CSS, которые в качестве значения используют какое-либо число. В первую очередь calc можно применять для вычисления размеров, уголов, времени. Причем функция позволяет смешивать различные единицы измерений, например ширину div-а можно задать так:

div {
width: calc (100% — 40px);
}

В этом случае ширина div-а будет равно ширине родительского элемента минус 40 пикселей.

В выражениях можно использовать следующие арифметические действия:

• + — сложение. Символ отделяется пробелами с двух сторон (height: calc (20% + 50px));
• — — вычитание. Символ отделяется пробелами с двух сторон (width: calc (90% — 10px););
• * — умножение (padding: calc (2em*2););
• / — деление. На ноль делить запрещено (width: calc (100%/4);).

В браузерах Firefox до версии 16.0 поддерживается функция -moz-calc, в Chrome до версии 26.0 и в Safari с версии 6.0 поддерживается -webkit-calc.

Например, нам необходимо в резиновом двухколоночном макете сайта сделать так, чтобы между колонками при любом размере окна браузера было расстояние 50px. Тогда с помощью функции calc это делается следующим образом:

При работе с CSS всегда наступает такой момент, когда начинаешь понимать, насколько мощным является то или иное его средство. Несмотря на то, что я довольно хорошо понимаю единицу измерения em CSS , по-настоящему прочувствовал их силу только после того, как прочитал запись Simurai . В этой статье я собираюсь использовать его опыт.

Что такое em?

В CSS единица измерения em равна текущему размеру шрифта элемента, к которому применяется em . Когда единицы измерения em используются в дочерних элементах, которые не имеют определенного размера шрифта, они наследуют его от родителей, вплоть до корневого элемента документа.

Посмотрите на следующий код CSS :

Example { font-size: 20px; }

В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size ) будет равен 20px . Так что, если мы добавим строку:

Example { font-size: 20px; border-radius: .5em; }

Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5 ). Аналогично:

Example { font-size: 20px; border-radius: .5em; padding: 2em; }

Значение отступа 2em будет равно 40px (20 * 2 ). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.

Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px . Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.

Изменение размеров уровней компонента

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

Метод работает следующим образом: используется свойство font-size , которое создает основную единицу для различных элементов внутри модуля. Поскольку единица измерения em рассчитывается на основе font-size родительского элемента, то это делает весь компонент легко редактируемым путем изменения свойства font-size родительского элемента.

Давайте посмотрим на это в действии:

Посмотреть демо

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

Следует отметить, что установка размеров компонента через одно свойство CSS не обязательна, пользователь может менять размеры в настройках. Это сделано для того, чтобы разработчик мог быстро внести изменения, не перебирая различные значения во всех частях компонента.

Когда размер шрифта изменяется, это сказывается на всех em CSS значениях родительского элемента, а также всех его дочерних элементах, делая все части компонента пропорционально гибкими.

Обратите внимание, что:

• Внутри компонента все размеры задаются с помощью em . Кроме внешней границы и изображения, которое при желании можно изменить, но меня устраивает размер, который в данном случае статичен;
• Значок в правом верхнем углу, похожий на слезинку — это псевдоэлемент, который аналогичным образом использует размер шрифта родительского элемента;
• CSS также включает в себя два медиа-запроса, которые корректируют размер шрифта родительского элемента. Что показывает полноценность этого метода, потому что не нужно менять все размеры в медиа-запросах, а только размер шрифта.

Некоторые замечания, упущения и т.д .

Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.

Возможно, вам придется подправить некоторые значения единицы измерения em в CSS . И как в случае с границей родительского элемента в примере, вы вряд ли захотите изменить размер. Так как свойство применяется ко всем элементам. Можно решить эту проблему, просто избегая em элементов, которые хотите сохранить.

Не нужно использовать пиксели, чтобы установить корневой font-size . Вы можете использовать для этого em , но помните, что эти единицы измерения будут передаваться по наследству от родителей.

Что насчет rem и Sass?

Единица rem в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент . Таким образом можно использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.

Что касается использования препроцессора Sass , то это уже второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в Sass коде, и наследование будет работать таким же образом.

Заключение

Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов. Этот метод убедительно доказывает, насколько мощным средством является единица измерения em в CSS .

Перевод статьи “The Power of em Units in CSS ” был подготовлен дружной командой проекта .

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px . Значит ли это, что для разных свойств нужны разные единицы?

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

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (margin: 1.2in; margin: 0.5cm), и наоборот.

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

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm):
72pt
↓

Так называемые абсолютные единицы (cm , mm , in , pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами - это много. Лучше вместо них использовать относительные единицы, напр. em .

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em - просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя - крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота - это, грубо говоря, высота строчных букв вроде a , c , m , или o . У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица 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 и т.д.