Измерение вещей — такой же важный аспект веб-дизайна, как и любой другой. Тот факт, что у нас есть как минимум 10 различных единиц измерения в CSS, говорит сам за себя.
Каждое устройство выполняет свои конкретные задачи и делает веб-страницы более гибкими для различных устройств. Как только вы познакомитесь со всеми этими единицами, вы сможете более точно определить размеры ваших элементов. В этом руководстве мы рассмотрим различные модули, доступные в CSS, и обсудим, какие модули использовать в каких ситуациях и как их использовать.
Абсолютные единицы длины
Абсолютные единицы представляют собой цифровое представление реальных измерений в физическом мире. Эти единицы не связаны с размером экрана или его разрешением. В результате, единицы абсолютной длины не так хорошо подходят для использования на цифровых устройствах или когда разрешение неизвестно. Эти устройства больше подходят при разработке для физических носителей, таких как печать.
Абсолютные единицы включают в себя:
- см (сантиметры)
- мм (миллиметры)
- в дюймах)
- ПК (фото)
- точка (баллы)
- пикселей (пикселей)
Обратите внимание, что черновой вариант спецификации редактора также включает единицу измерения в четверть миллиметра (q), но это новое и, похоже, не поддерживает браузер.
Вы можете заметить, что при использовании абсолютных длин существуют различия между одинаковыми значениями конкретной единицы на разных экранах. Это из-за разницы в DPI (точек на дюйм) для экрана. Экраны с более высоким разрешением имеют более высокое разрешение по сравнению с экранами с меньшим разрешением, благодаря чему изображение или текст выглядят меньше.
Наиболее широко используемым из всех абсолютных единиц является пиксель (px). Пиксель обычно понимается как одна точка на экране, хотя технически он более сложен, чем этот . Это наименьшая единица измерения и, как правило, единица измерения, используемая в качестве ориентира для других единиц.
Другие единицы измерения, такие как дюйм, миллиметр и сантиметр, представляют физический размер этих единиц. Точечная (pt) единица представляет 1/72 дюйма, а pica (pc) представляет 1/6 дюйма. Вот некоторый CSS, который использует шесть общих абсолютных единиц:
p { border-top: 0.5in solid blue; border-bottom: 18mm solid green; border-left: 1cm solid red; border-right: 40px solid black; letter-spacing: 0.4pc; font-size: 20pt; } Эта демонстрация CodePen показывает приведенный выше код в действии:
Относительные единицы длины
Относительные единицы , как следует из названия, не имеют фиксированных значений. Их значения относительно некоторого другого предопределенного значения или функции. Относительные единицы позволяют легко подобрать размеры элементов, поскольку мы можем связать их ширину, высоту, размер шрифта и т. Д. С некоторыми другими базовыми параметрами.
Эти устройства обычно рекомендуются при создании адаптивных макетов и предпочтительнее для цифровых носителей. Их значение может быть относительно используемых вами шрифтов или высоты и ширины окна просмотра экрана.
Относительные единицы включают в себя:
- ex (x-height)
- ch (символ)
- em (назван в честь печати ems , но не совпадает)
- rem (root em)
Давайте рассмотрим каждый из них более подробно.
X-высота (ex) и символ (ch)
Бывший блок редко используется в разработке. 1ex равен размеру строчной буквы «x» в используемом шрифте. В большинстве случаев значение 1ex почти равно 0.5em. Однако это меняется от одного шрифта к другому. Эту единицу можно считать вертикальным эквивалентом em .
p { font-size: 2ex; }
Единица символа (ch) связана с символом «0». 1ch — это предварительная мера символа ‘0’ в шрифте.
p { margin: 2ch; }
Эм единиц
Единица em имеет значение, равное размеру шрифта базового элемента или родительского элемента. Например, если размер шрифта родительского элемента равен 20px то значение 1em будет равно 20px для всех непосредственных дочерних элементов. Размер шрифта дочернего элемента может быть легко увеличен или уменьшен на основе знаний базового блока. Номер не обязательно должен быть целым числом.
Использование em позволяет нам поддерживать размеры шрифтов различных элементов в фиксированном соотношении. Например, если значение font-size для родительского элемента равно 50px , установка размера шрифта дочернего элемента на 2em будет такой же, как установка на 100px . Точно так же установка его в 0.5em сделает размер шрифта дочернего элемента 25px .
Демонстрация ниже показывает простой пример того, как работают единицы em :
Однако иногда единицы em дают нежелательные результаты в случае вложенных элементов. Это связано с тем, что значение em принимает значение непосредственного родительского тега, поэтому у каждого вложенного дочернего элемента будет то же значение em , но другое вычисленное значение, поскольку вычисленное значение всегда относительно его непосредственного родителя. Таким образом, это затрудняет, если нам нужно установить значение текущего элемента в соотношении с родительским элементом, который не является непосредственным или не корневым родителем.
Ниже приведена демонстрация, демонстрирующая необычный эффект вложенности модуля em . Для этого примера мы предполагаем, что в документе есть базовый размер шрифта 16 16px (который часто используется по умолчанию):
Обратите внимание на вложенные элементы в HTML, каждый с содержимым, объявляющим вычисленный размер шрифта.
Ниже приведен CSS для этого примера:
div { font-size: 1.15em; } span { font-size: 2em; }
Вы можете видеть, что, хотя все элементы div определены на 1.15em , поскольку они являются вложенными, они имеют разные фактические размеры шрифта.
Рем единицы
Здесь вам пригодится блок rem . Значение rem всегда остается равным размеру шрифта корневого элемента (который является элементом html в документах HTML). Демо-версия rem аналогична демо-единицам. Вот CSS:
div { font-size: 1.15rem; } span { font-size: 2rem; }
Вот простая демонстрация с той же вложенностью, что и предыдущая, но на этот раз с использованием rems:
Теперь обратите внимание, что вложение все еще присутствует, но не влияет на вычисленный размер шрифта вложенных элементов.
Относительная длина окна просмотра
Относительная длина области просмотра зависит от ширины и высоты окна просмотра или области просмотра. Окно просмотра или окно просмотра — это видимая область или выделенное пространство на экране.
Относящиеся к окну просмотра окна включают в себя:
- VH (высота области просмотра)
- vw (ширина области просмотра)
- vmin (минимум области просмотра)
- Vmax (максимальная область просмотра)
Высота окна просмотра (vh) и Ширина окна просмотра (vw)
Блок vh связан с высотой области просмотра. Значение vh равно vh высоты окна просмотра. Этот блок полезен, если мы хотим масштабировать элементы в зависимости от высоты окна браузера. Например, если высота области просмотра составляет 400px , 1vh равен 4px . Если высота области просмотра 800px , 1vh равен 8px .
Так же, как vh относится к высоте окна, единицы измерения vw связаны с шириной области просмотра. Поэтому значение 1vw может быть выведено аналогично. Это означает, что 1vw равен 1vw ширины области просмотра. Например, если ширина окна составляет 1200px , 1vw будет 1200px 1vw . CSS для установки ширины, высоты и заполнения элемента в единицах видового экрана:
div { height: 80vh; width: 95vw; padding: 1vw; }
Минимальный видовой экран (vmin) и максимальный видовой экран (vmax) единиц
Модуль vmin связан со стороной области просмотра с более низким значением, поэтому он может быть либо высотой, либо шириной. Значение 1vmin равно 1/100-й стороне с наименьшей длиной. Например, если размеры области просмотра составляют 500 x 700, тогда значение 1vmin равно 5px . Если бы размеры были 1000 x 700, значение было бы 7px.
И наоборот, vmax учитывает максимальное значение области просмотра. Коэффициент отношения снова равен 1/100, поэтому 1vmax составляет 1/100 от края с более высоким значением. Принимая те же примеры, что и выше, если размеры области просмотра 500 x 700, то значение 1vmax равно 7px. В случае, если размер был 1000 х 700, значение будет 10 пикселей. Это CSS для установки ширины и высоты в vmin и vmax :
div { height: 80vmin; width: 95vmax; padding: 1vmax; }
Поддержка браузера
em, ex, px, cm, mm, in, pt и pc
Поддерживается во всех браузерах, включая старый IE.
ч
Firefox, Chrome 27+, IE 9+, Safari 7+ и Opera 20+.
рем
Все используемые браузеры, включая IE9 +. Если вам нужна дополнительная поддержка, вот полифилл .
VW, VH и Vmin
Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. Стоит помнить, что в Internet Explorer vmin поддерживается нестандартным синтаксисом vm . Для polyfill вы можете попробовать vminpoly или использовать -prefix-free с плагином .
Vmax
Chrome 20+, Firefox 19+, Opera 20+ и Safari 6.1+. Нет поддержки в IE. Вы можете попробовать этот polyfill для некоторой хакерской поддержки и помочь с некоторыми ошибками в различных мобильных браузерах.
Вывод
В этом уроке вы кратко познакомились с различными единицами измерения, доступными в CSS, включая многие новые единицы, которые могут помочь с адаптивными макетами и измерениями между устройствами. Вы использовали объекты rem или viewport в каких-либо проектах? Как прошел ваш опыт? Поделитесь своими советами по использованию этих устройств или любыми проблемами в разделе комментариев.