Единицы измерения vw и vh. Единицы измерения длины в CSS. Шрифто-зависимые единицы измерения

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

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

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

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

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

body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px }

Здесь мы написали, что у 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 является применение 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» - это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в "%" позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в "%" изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.

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

Я упоминала новые (относительно) единицы измерения. Эти единицы – vw, vh, vmin и vmax, они основаны на размере вьюпорта браузера. Их фактический размер меняется в зависимости от изменения области просмотра браузера, что делает эти единицы идеальными для адаптивного дизайна. Хотя в моем предыдущем посте я выступила против использования этих единиц для указания размеров шрифта, они могут быть очень полезны для работы с элементами макета.

Единицы измерения viewport

Единицы измерения viewport являются относительными единицами, это означает что они не могут быть измерены объективно. Их размер определяется размером области просмотра в браузере. Существуют четыре единицы, относящиеся к области просмотра.

Я сконцентрирую внимание на первых двух, так как они наиболее часто используются. Во многих случаях единицы viewport (vh и vw) пересекаются с процентами в плане возможностей. Тем не менее, каждая из них имеет свои сильные и слабые стороны.

Если резюмировать, то получится следующее:

Когда имеешь дело с шириной, то лучше подходят %, а если с высотой, то лучше vh.

Элементы во всю ширину страницы: % > vw

Как я уже говорила vw определяет размер элемента исходят из ширины viewport. Однако, браузеры рассчитывают размер с учетом места для скроллбара.

Если ширина страницы превышает ширину viewport, то появляется полоса прокрутки. Однако на деле ширина viewport больше, чем ширина элемента html

Viewport > html > body

Поэтому если вы установите ширину элемента в 100vw, то элемент выйдет за пределы html и body. в данном примере я сделала красную границу вокруг элемента html и залила разделы разными цветами.

Из-за этого нюанса делать элементы на всю ширину страницы лучше при помощи процентов, а не опираясь на ширину viewport.

Элементы на всю высоту страницы: vh > %

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

Используя vh добиться такого эффекта достаточно просто:

Example { height: 100vh; }

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

Вот несколько примеров того, как можно использовать единицы измерения vh.

Полноэкранные фоновые изображения

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

Bg { position: relative; background: url("bg.jpg") center/cover; width: 100%; height: 100vh; }

Аналогичным образом мы можем сделать эффект «страниц», задав каждому разделу размеры области просмотра.

Section { width: 100%; height: 100vh; }

Мы можем использовать JavaScript чтобы создать иллюзию перелистывания страниц.

$("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("up")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos }, 1000); })

Складывающееся изображение

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

Нам понадобится следующий код

Img { width: auto; /* Автоматическая ширина для пропорциональности высоты */ max-width: 100%; /* Не больше ширины родительского элемента */ max-height: 90vh; /* Не превышая высоту viewport */ margin: 2rem auto; }

Поддержка браузерами

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

Вот как их можно решить.

В CSS есть несколько основных единиц измерения это относительные и абсолютные. При работе с CSS следует точно разобраться с их применением иначе работа с каскадными таблицами стилей будет сложна и непонятна. Абсолютные единицы измерения делятся на 5 типов, относительные на 4. Следует знать что Абсолютные единицы измерения не зависят от устройства вывода, т.е. мониторов и экранов, относительные же определяют размер элемента относительна другого размера т.е. монитора, экрана, родительского элемента и т.д.Теперь подробнее о них.

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

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

EM

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

EX

Этот аргумент определяется как высота символа «х» в нижнем регистре. Ex привязан к размеру шрифта заданного в браузере по умолчанию, если у родительского элемента задан атрибут «font-size» то он привязан к нему.

PX

Пиксель это 1 точка разрешения устройства вывода (монитора или экрана). Т.е. Если у вас разрешение монитора 1024*768 то вы имеете 1024 пикселя по горизонтали и 768 пикселей по вертикале. Т.е. размер пикселя напрямую зависит от разрешения устройства вывода и его технических характреристик.

%

Процентная единицы измерения зависит от размеров родительского элемента.

Абсолютные единицы измерения.

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

Из данных единиц следует описать только pt (пункт), т.к. pc это производное от pt а использование in, cm и mm описывать не нужно.

Пункт является самой распространенной и повсеместно используемой единицей измерения шрифтов (помните как выставляли размер шрифта в том же ворде или опен офисе?).