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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Сравнение и объяснение всех единиц измерения CSS

Дата публикации: 2020-12-18

От автора: каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть.

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Наиболее часто используемый из группы. Хотя px обычно ассоциируется с пикселем, из-за аббревиатуры, он не обязательно равен одному пикселю на экране. Означает ли это, что px на самом деле не абсолютны? Ну, вроде да, но в то же время и нет.

Это единица измерения, специально разработанная для CSS, и ее реальное значение зависит от «разрешения» экрана или принтера, также известной как PPI (пикселей на дюйм) или DPI (точек на дюйм) соответственно. В этом плане это несколько относительно. Используя экраны разного разрешения и одинаковых размеров, чтобы убедиться в этом — вы увидите, что независимо от разрешения, px должны выглядеть одинаково.

Тем не менее px, это не лучшая единица измерения для создания адаптивного дизайна. Это относительно PPI / DPI, но это только гарантирует, что он будет выглядеть одинаково при разном разрешении экрана. Это не связано с каким-либо конкретным значением, которое может быть установлено разработчиком. Это, безусловно, будет полезно для установки, например, основных font-size или минимальных / максимальных размеров элемента, но вы не должны злоупотреблять ими.

cm / mm / in

Здесь я собрал 4 единицы, так как они имеют некоторые общие свойства. Все они обычно используются в реальных измерениях. Из-за этого они, в основном, подходят для стилизации веб-сайта для печати (согласно правилу @media print <>), а не непосредственно для просмотра на экране.

Хотя использование этих единиц для печати должно привести к относительно правильному представлению в реальном мире, то же самое не относится к их использованию на экранах. Поэтому, если вы поместите линейку на экран (не делайте этого), не ожидайте, что элемент с width 1cm будет соответствовать реальному размеру 1 см.

Тем не менее, есть возможность выполнить некоторые математические вычисления, чтобы отобразить на экране «настоящие» см: 1in = 2.54cm = 25.4mm = 101.6q = 96px

Примечание: я также добавил q (четверть миллиметра) в сравнение, которая равна 1/4 мм — очень непопулярная единица, использование которой не рекомендуется — для экранов, принтеров и т.д.

И вот некоторые доказательства, подтверждающие эти расчеты:

Имейте в виду, что, хотя такие измерения возможны, их не рекомендуется использовать (если вы не применяете виртуальную линейку или что-то в этом роде).

pt / pc

Наконец, у нас есть 2 очень разных единицы по сравнению с тем, что мы уже видели: pt (points) и pc (picas).
Эти единицы в настоящее время широко не используются ни в виртуальном, ни в реальном мире, хотя они уходят корнями к типографическому дизайну. Может быть, поэтому они, в основном, используются с такими свойствами, как font-size.

Что касается математики и визуализации: 6pc = 72pt =

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

Начнем с самой узнаваемой относительной единицы — процента %. В CSS все, что использует эту единицу, относится к:

Родителю (общее правило).

Последнему родительскому элементу, для которого значение position установлено relative, когда значние элемента установлено absolute.

Корневому элементу, когда для position устанавливается fixed.

Однако с этим есть несколько подводных камней, например, при задании значения width или height в процентах не работают, когда размеры родительского элемента определяются автоматически (установлены auto или не установлены вообще).

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

ex / ch

Далее у нас есть ex и ch- очень специфические единицы, которые действительно полезны только при работе с моноширинными шрифтами.

ex соответствует «x-height» текущего шрифта, где «x-height» означает высоту строчного x символа. С другой стороны, ch соответствует ширине символа 0. Таким образом, в обоих случаях мы имеем дело с измерением размера символа по оси x или y. Если вам интересно — да, на эти единицы влияет элемент font-size.

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

ex, как % и другие, все абсолютные единицы поддерживаются практически повсеместно, немного хуже ситуация с ch, но поддержку все же можно считать отличной (почти 98%):

Поддержка единицы ch по данным caniuse.com

Для шрифта Nunito, который используется на этом веб-сайте, с размером шрифта 17px или 16px зависимости от размера области просмотра, здесь вы можете увидеть эти единицы в действии:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

em / rem

Наконец, мы дошли до моих любимых – em и rem. Если вы когда-либо создавали современный адаптивный веб-сайт, значит, вы слышали о них и, скорее всего, использовали их.

em является относительной единицей, или я должен сказать равной элементу font-size. Так что, если font-size задан 16px, это значение 1em. Таким образом, эти единицы идеально подходят для масштабируемых проектов, а также имеют отличную поддержку браузера.

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

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

Поддержка rem по данным caniuse.com

Вот пример того, как em и rem с любым font-size 17px или 16px зависит от размера области просмотра. Имейте в виду, что этот font-size установлен только на верхнем уровне веб-сайта, поэтому не удивляйтесь, что они выглядят одинаково.

vh / vw / vmin / vmax

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

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

Поддержка единиц области просмотра по данным caniuse.com

Что касается некоторых примеров — ниже вы должны увидеть 2 пары полос одинаковой ширины, которые зависят от вашего окна просмотра:

Другие единицы

Мы рассмотрели все единицы длины CSS (по крайней мере, из того, что я знаю), но есть и другие виды единиц CSS, которые мы должны изучить!

Время: s / мs

Единицы времени в CSS — секунды (s) и миллисекунды (ms) используются со свойствами, которые требуют от вас указания продолжительности чего-либо, например, animation или transition (и их «подсвойств»).

Это невозможно продемонстрировать с помощью столбцов, поэтому я оставлю вам только математику, которую вы почти наверняка уже знаете: 1s = 1000ms

Угол: deg / rad / grad / turn

В CSS мы также можем столкнуться с ситуациями, когда нам нужно установить какой-то угол. Для случаев, когда в transform применяют вращение или CSS градиенты, могут быть использованы единицы deg, rad, grad, и turn. Самый популярный из них – deg означает градусы, как мы все знаем. Остальные три также используются в реальном мире — радианы, градиенты и повороты (вращения на 360 градусов).

В целом, я рекомендую придерживаться deg, возможно, вы можете использовать rad и grad, если они действительно соответствуют вашим конкретным потребностям (например, значения, полученные из вычислений в JavaScript). Повороты действительно удобны, но они не так популярны, как градусы, поэтому лучше придерживаться того, что известно.

Что касается математики: 360deg = 400grad = 1turn =

Советы по синтаксису единиц измерения

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

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

Имена единиц не чувствительны к регистру, поэтому вы можете указать их как 1tUrN или 1REM, но разумной практикой является сохранение всех их в нижнем регистре.

Между значением и обозначением единицы не допускается пробел.

Безразмерные единицы – 0 не разрешены для единиц измерения времени.

Заключение

Итак, это все, что я хотел сказать! Я думаю, это было весело. Единицы измерения CSS — довольно простая тема, но даже такие простые вещи могут быть интересны.

Тем не менее, я придерживаюсь основ, и для меня набор px, rem, %, ms и deg — это все, что мне нужно, и все, что я действительно использую для создания дизайнов. Возможно, я время от времени, добавляю единицу окна просмотра, когда имею дело с определенными элементами, но это действительно все.

Какой у вас «стандартный» набор единиц CSS? Узнали ли Вы что-то нового, чего не знали раньше? Вы хотите видеть больше таких простых, но интересных постов в блогах? Дайте мне знать в комментариях ниже! Спасибо за чтение и удачного кодирования!

Автор: Arek Nawo

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

• ← С чем сделать расслабляющую ванну
• c programdata microsoft windows wer reportqueue можно ли удалить →