Работая с CCS, очень легко застрять на каком-то моменте, ведь порой работая даже по знакомому методу, бывает, что появляются новые проблемы.

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

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

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

Начнем с того, что похоже на то, что вам, скорее всего, уже знакомо. Единица em определяется как текущий font-size. Так, если вы, например, установите font-size (размер шрифта) на элементе body, то значение em любого младшего элемента в пределах body будет равна этому font-size.

Здесь мы написали, что у div font-size будет равен 1.2em. Это в 1.2 раза больше чем font-size, у которого он унаследовал, он составлял 14px. Таким образом, результат 16.8px.

Однако, что произойдет, если вы каскадом расположите определяемые em font-size внутри друг друга? В следующем отрывке мы применяет тот же самый CCS, что и выше. Каждый div наследует font-size от своего родителя, выдавая нам постепенно увеличивающиеся размеры шрифта.

Не смотря на то, что это может подойти в некоторых случаях, часто мы хотим просто полагаться на единственную метрику для измерения. В этом случае мы должны использовать rem. “r” в rem обозначает “корень”; он равен набору размера шрифта в элементе корня; в большинстве случаев он является элементом HTML.

Html { font-size: 14px; } div { font-size: 1.2rem; }

Во всех трех div из предыдущего примера, шрифт может достигать 16.8px.

5 баллов, Grid

Rem полезны не только в калибровке шрифта. Например, мы могли бы базировать всю систему grid или библиотеку UI по использованию размера шрифта HTML корня rem, и использовать их вычисление в определенных местах. Это дало бы нам более предсказуемую калибровку шрифта и вычисления.

Container { width: 70rem; // 70 * 14px = 980px }

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

vh и vw

Отзывчивые методы веб-дизайна полагаются, в большой степени, на правило процента. Однако процент CSS - не всегда лучшее решение для каждой проблемы. Ширина CSS родственна ближайшему элементу, в котором содержится родитель. Что, если мы хотим использовать ширину или высоту окна просмотра вместо ширины исходного элемента? Это именно то, что помогают делать единицы vh и vw.

Элемент vh равен 1/100 высоты окна просмотра. Например, если высота браузера 900px, 1vh может достигать 9px. Также, если ширина окна просмотра составляет 750px, 1vw может достичь 7.5px.

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

Slide { height: 100vh; }

Предположим, вы хотите сделать заголовок, который заполнит всю ширину экрана. Чтобы сделать это, вам необходимо установить font-size в vw. Этот размер будет соизмерим с шириной браузера.

vmin и vmax

В то время как vh и vm всегда связаны с высотой и шириной окна просмотра, также vmin и vmax связаны с максимумом и минимумом этой высоты и ширины, в зависимости от того, какая из них меньше, а какая больше. Например, если браузер имеет параметры 1100px в ширину и 700px в высоту, 1vmin будет 7px, а 1vmax - 11px. Однако, если ширина установлена на 800px, а высота на 1080px, то vmin будет равен 8px, в то время как vmax будет установлен на 10.8px.

В каких случаях вы сможете использовать эти значения?

Представьте, что вам нужен элемент, который всегда остается видимым на экране. Используя высоту и ширину, установленные значением vmin ниже 100 позволит вам этого добиться. Например, квадратный элемент, который касается, как минимум двух частей экрана может быть определен так:

Box { height: 100vmin; width: 100vmin; }

Если вам нужен квадрат, который будет покрывать всю видимую зону окна просмотра, используйте те же правила, но кроме vmax.

Box { height: 100vmax; width: 100vmax; }

Комбинация этих правил позволит вам использовать размер вашего окна просмотра очень гибко и с максимальной продуктивностью.

ex и ch

Единицы ex и ch, так же как em и rem, соотносятся с current font и font size. Однако, поскольку они основаны на определенных для шрифта мерах, ex и ch также соотносятся с font-family, в отличие от em и rem.

Единица ch или единица character, определяется как «улучшенная мера» ширины знака 0. Это понятие вызвало много споров, но основная идея состоит в том, что обладая шрифтом фиксированной ширины, квадрат с шириной N знаками единиц, таких как width: 40ch; могут всегда содержать последовательность из 40 знаков в этом конкретном шрифте. В то время как обычное использование этого особого правила состоит в расположении шрифта Брайля, возможности для креативности здесь, конечно, простираются вне этих простых заявлений.

Единица ex определяется как «х-высота текущего шрифта ИЛИ одна-вторая от em». Thex-высота данного шрифта - высота строчных букв x того шрифта. Чаще всего, это примерно в средней отметке шрифта.

Существует много областей, где могут использоваться подобные единицы. Чаще всего в типографии. Например, элемент sup, который выступает как superscript, может быть добавлен в строку, используя соответствующую позицию и конечное значение 1ex. Точно так же вы можете сбросить нижний элемент. Ошибки браузера исправляются правилами superscript- и subscript-specific vertical-align, но если вы хотите больше контроля, вы можете попробовать следующее:

Sup { position: relative; bottom: 1ex; } sub { position: relative; bottom: -1ex; }

Вывод

Очень важно следить за развитием и распространением CSS, так же как и узнавать о новых инструментах и добавлять их к себе в список умений. Скорее всего, вы встретитесь с проблемами, которые могут быть решены с помощью этих единиц. Не пожалейте времени и прочитайте спецификацию. Подпишитесь на обновления от cssweekly. И, конечно, не забудьте подписаться на еженедельные обновления и бесплатные обучающие видео на Tuts+!

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

Относительные единицы

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

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size ). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em , в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em , а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html .

Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.

Абсолютные единицы

Абсолютные единицы представляют собой физические размеры - дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Пример

Заголовок размером 30 пикселей

Размер текста 1.5 em

Заголовок размером 24 пункта

Сдвиг текста вправо на 30 миллиметров

Примечание

При установке размеров обязательно указывайте единицы измерения, например width : 30px . В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin : 0 ).

Internet Explorer поддерживает единицу vm вместо vmin .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

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

Абсолютные единицы

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.

One-cm { font-size: 1cm; } .one-mm { font-size: 1mm; } .one-in { font-size: 1in; }

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.

One-point { font-size: 1pt; } .one-pica { font-size: 1pc; }

Относительные единицы

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

One-pixel { font-size: 1px; } .one-percent { font-size: 1%; }

Пиксель - точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em - высота текущего шрифта, ex - высота символа "х" в нижнем регистре указанного шрифта.

One-ex { font-size: 1ex; } .one-em { font-size: 1em; }

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

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem - размер шрифта корневого элемента (), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.

One-rem { font-size: 1rem; }

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.

Width: 50vw; /* 50% от ширины области просмотра */ height: 25vh; /* 25% от высоты области просмотра */

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

Width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */ height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше */

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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

P { font-size: 0.394in; } /* десятичная дробь */ p { margin: -1px; } /* отрицательное значение */

Обратите внимание, что объявление не будет работать, если перед единицей измерения стоит пробел, или если единица измерения не указана (за исключением нулевого значения). Если в качестве значения используется ноль, то указание единицы измерения можно опустить.

P { font-size: 1ex; } /* корректно */ p { font-size: 0; } /* корректно */ p { font-size: 0ex; } /* корректно */ p { font-size: 1 ex; } /* неправильно */ p { font-size: 1; } /* неправильно */

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

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

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 всегда наступает такой момент, когда начинаешь понимать, насколько мощным является то или иное его средство. Несмотря на то, что я довольно хорошо понимаю единицу измерения 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 ” был подготовлен дружной командой проекта .