Когда мы начинаем заниматься веб-разработкой, а точнее HTML и CSS, мы очень часто застреваем на уже знакомых нам инструментах.
Однако это может стать проблемой из-за большого роста сети, а вместе с ней и появления новых проблем и, соответственно, новых решений. Это обычная ситуация, когда дело доходит до единиц измерения в CSS, из-за огромного разнообразия мы в конечном итоге пропускаем некоторые из существующих и фактически не используем всю доступную мощь.
Есть некоторые единицы измерения, к которым вы, вероятно, привыкли, например знаменитый пиксель! В этом посте мы рассмотрим все текущие единицы измерения и то, как они могут помочь нам в вашем путешествии в качестве веб-разработчика. Прежде чем идти дальше, нам нужно понять, в чем разница между абсолютным показателем и относительным показателем.
Абсолютные измерения
Это самые распространенные из них, которые мы видим ежедневно. Это измерения, которые не привязаны к какой-либо другой единице, то есть они не зависят от эталонного значения. Это единицы измерения, определяемые физикой, такие как пиксели, сантиметры, метры и т. д.…
Эти измерения являются фиксированными и не изменяются в зависимости от характеристик устройства. Этот тип измерения показан, когда мы прекрасно знаем физические характеристики и конфигурации средств массовой информации, где будут представлены наши проекты.
Подкину спойлер, в «реальном мире» мы будем знать всю информацию обо всех устройствах? Удержите эту мысль!
Относительные меры
Это те, к которым мы обычно не привыкли. Эти показатели рассчитываются на основе другой определенной единицы измерения, например em и rem (подробнее об этих двух показателях мы поговорим в этой публикации). Их использование более целесообразно, так как мы можем вносить коррективы на разных устройствах, обеспечивая согласованное и плавное расположение на разных носителях.
Поскольку эти измерения рассчитываются браузером на основе других единиц измерения, они обычно достаточно гибкие. То есть у нас могут быть разные результаты в зависимости от окружения.
Чтобы начать работу с существующими мерами, я решил начать с абсолютных мер, так как мы обычно лучше знакомы с ними. Как сказал бы мой друг Флавио Алмейда, хорошо начал, наполовину сделал!
Абсолютные меры в CSS
Пиксели (px)
Вы, наверное, уже знаете или слышали об этом парне по имени Пиксель. Пиксель — это не что иное, как маленькие светящиеся точки на экране вашего монитора, мобильного телефона, телевизора и т. д.… Следовательно, пиксель — это самый маленький элемент устройства отображения!
Это очень известное измерение для веб-дизайнеров, большинство веб-разработчиков используют пиксель в качестве основной единицы своих проектов.
Деталь, о которой мало кто знает, заключается в том, что пиксель CSS на самом деле НЕ является пикселем экрана устройства (аппаратного обеспечения), а тем, что мы называем эталонным пикселем, который обычно больше реального пикселя. Что в конечном итоге делает его абстрактной мерой, где вам нужно контролировать сопоставление этого эталонного пикселя с аппаратным пикселем (это происходит за кулисами!).
Определение эталонного пикселя в CSS — это угол обзора (0,0213 градуса) пикселя на устройстве с плотностью 96 dpi на расстоянии вытянутой руки от читателя (28 дюймов), см. изображение ниже:
Преимущество этого эталонного пикселя заключается в том, что он учитывает близость экрана, например, при использовании мобильного телефона, который находится рядом с нами, эталонный пиксель будет аналогичен размеру монитора, находящегося дальше от нас.
Следовательно, не существует такого понятия, как «идеальный» пиксель. Только если мы разрабатываем веб-сайт для того же устройства, с тем же размером экрана и с использованием того же браузера, но мы знаем, что в реальном мире это работает не так!
Интересно отметить, что недавно начальная загрузка 4 перестала использовать PX и перешла на REM, также использование пикселя дает нам ощущение, что это то же самое, что и аппаратный пиксель, который может вызвать недоумение у новичков. Разработчики.
Одним из наиболее важных аспектов для этих веб-дизайнеров является масштабируемость и адаптируемость макета, то есть по мере того, как единицы увеличиваются предсказуемым и разумным образом, ваш макет должен быть в состоянии адаптироваться к этим изменениям. .
С другой стороны, идея сохранения одного и того же аспекта (размера) на разных устройствах может показаться привлекательной (следите за эталонным пикселем!), но с другой стороны, мы имеем негативные последствия, когда имеем дело с низким разрешением. устройства (размытый рендеринг).
Баллы (pt)
Следующая единица измерения – Point. Этот блок определенно больше известен дизайнерам, особенно тем, кто изучает типографику.
Эта мера обычно используется для свойств вашего проекта, связанных со шрифтами. Его аббревиатура отмечена pt, и его использование не так уж распространено, вы, вероятно, будете видеть эту единицу очень редко.
Как правило, этот показатель предполагается использовать в печатных таблицах стилей, когда вам нужно быть уверенным в используемом размере шрифта. Не рекомендуется для экранного стиля!
дюймы
Дюйм — еще одна единица измерения, известная нам из мира абсолютных измерений; обычно мы видим их, когда хотим купить новый телевизор или монитор, но такое устройство существует и в мире Интернета.
Хотя они и существуют, но обычно не используются в проектах, так как не имеют практического применения (тех же результатов мы можем добиться, используя другие блоки).
Сантиметр и миллиметр (см/мм)
Нам, принявшим метрическую систему, хорошо знакомы эти две меры, широко употребляемые в быту. Несмотря на то, что сантиметр и миллиметр очень распространены, они редко используются в CSS. Как и pt, предполагается использование этих двух для печати таблиц стилей (более точных измерений), избегая их применения к экранам.
Пайка (ПК)
Это также редко используемая единица в веб-мире, Paica также используется в CSS, унаследованном от типографики. Поскольку это не очень известная единица, о ней забывают, но всегда важно знать все инструменты, которые есть в нашем распоряжении. Соотношение между абсолютными единицами:
1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc
Относительные меры в CSS
Эмс (ems)
Наша первая относительная единица очень известна в мире CSS. Вы вряд ли найдете какой-либо браузер, который не поддерживает эту меру, которая существует с самого начала. Даже для IE нам пришлось бы использовать версию до 3.0, чтобы не было проблем.
Это, безусловно, одна из причин, делающих em очень популярными. Вторым моментом, несомненно, является простота создания плавных и адаптивных макетов.
Но как работает этот такой em?
Этот модуль изменяет дочерние элементы в соответствии с размером шрифта родительского элемента, так что приступим. Допустим, у нас есть следующий HTML-код, который позволяет мне поэтически использовать тег стиля:
<style>
#div{
font-size: 16px;
}
#child{
font-size: 2em;
}
</style>
<div id="father">
div father
<div id="child">
div child
</div>
</div>
Выше у нас есть родительский div, в котором я установил размер шрифта 16px, внутри этого div у нас есть один дочерний div. Как я уже упоминал, размер, определенный для шрифта, повлияет на em дочерних элементов.
В этом случае для самого внутреннего блока div (id = child) 1em будет равно 16px, следуя логике, 2em будет равно 32px и так далее. Мы также можем поставить такие значения, как 1,5! В нашем случае 1.5em будет равно 24px. Выражая размеры, такие как поля и отступы, с помощью em, это означает, что они будут связаны с размером шрифта родительского элемента.
Таким образом, в зависимости от размера шрифта, используемого в определенном элементе, размеры дочерних элементов будут изменяться в соответствии со ссылкой на этот размер шрифта!
Широко используемый метод заключается именно в использовании этой силы em путем разделения наших элементов на компоненты. Идея состоит в том, что изменение размера шрифта родительского элемента приводит к изменению и изменению размера всего компонента на основе этого нового значения.
Несмотря на то, что это весело, мы используем эту технику не для того, чтобы пользователь имел ползунок и менял размер шрифта, лол. Но для облегчения обслуживания компонента в целом, без изменения значений всех частей компонента. Отлично, верно?
Последний момент, о котором следует помнить при использовании em, заключается в том, что когда мы используем эту меру, мы должны учитывать размер шрифта всех родительских элементов. Например, если бы у нас был третий самый внутренний элемент div в нашем примере выше и мы установили размер шрифта равным 2em, в этом случае эти 2em будут равны 64px, как только размер шрифта родительского элемента был установлен равным 32px (2em! )! Есть идея?
Когда мы говорим о 5, 6, 7 вложенных элементах div, это может стать сложным, вероятно, будет не очень весело вычислять это! Но хорошая новость заключается в том, что у нас есть подразделение, которое помогает нам решить эту небольшую проблему.
Rems (rem, «корень em»)
REM является преемником EM, и оба имеют одинаковую операционную логику (размер шрифта), но способ реализации отличается. В то время как em напрямую связан с размером шрифта родительского элемента, rem связан с размером шрифта корневого элемента, в данном случае тег.
Тот факт, что rem относится к корневому элементу, устраняет проблему с несколькими вложенными div (элементами), поскольку не будет этого «наследования» размеров, помнить? То есть нам не нужно будет иметь головную боль при выполнении вычислений, так как мы опираемся на корневую метку.
Например, мы знаем, что тег html является корневым тегом каждого html-документа. При этом, если мы определим размер шрифта этого элемента равным 18px, то есть 1rem = 18px, 2rem = 36px и т. д. Обычно браузеры указывают размер шрифта по умолчанию для корневого элемента. (root), 16px, так что берегите сердце! Несмотря на то, что с этим устройством было тише работать, его мало использовали для адаптивного дизайна, что на первый взгляд может показаться немного странным…
Причиной этого является поддержка этой меры. Поддерживаются Chrome и Firefox, а также Opera и Safari; однако в прошлом большинство пользователей использовали IE, а точнее IE 8, и этот браузер не очень хорошо обрабатывал rems, поэтому разработчикам приходилось выбирать другую единицу измерения, во многих случаях эм.
Как я уже говорил ранее, базовое значение равно 16px, и это может затруднить нам поиск некоторых часто используемых стандартных размеров. Например, как нам достичь размера 10px, используя rem? Нам нужно рассчитать.
BASE 16px 10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem 18px = 1.125rem
и так далее, не очень «дружественные» или удобные номера. Однако мы можем использовать небольшую хитрость, чтобы помочь нам (62,5%).
html{
font-size: 62,5%;
}
h1{
font-size: 1.2rem; /*equivalent to 12px*/
}
p{
font-size: 2.4rem; /*equivalent to 24px*/
}
Обратите внимание, что таким образом значение пикселя всегда будет равно значению, определенному в rem, умноженному на 10! Становится удобнее, хорошо?
Хотя это звучит как хорошая идея, мы должны быть осторожны с этими подходами, так как это заставит вас переписать все размеры шрифтов вашего сайта, поэтому будьте осторожны!
На все это есть третье мнение. Это решение использует px, em и rem четко определенным образом. Идея состоит в том, чтобы определить размер шрифта корневого элемента в пикселях, модулей с помощью rem и элементов внутри модулей с помощью em, что позволяет легко манипулировать глобальным размером, который естественным образом масштабирует размер модулей (используя rem) и эти в свою очередь, они будут масштабировать внутренние элементы (которые используют em и ссылаются на родительский элемент).
Процент (%)
Несмотря на то, что это не единица измерения, процент часто используется, когда речь идет об адаптивном и гибком макете, поэтому вы не могли пройти мимо него. Процент позволяет нам создавать модули, которые всегда будут перепрофилированы, чтобы занимать указанное количество. Например, если мы определим элемент, который имеет размер 50%, независимо от рассматриваемого устройства, этот модуль всегда будет занимать половину соответствующего ему пространства (если он находится внутри любого другого элемента).
Обратите внимание, что если мы изменим размер содержащего div, размер элемента внутри него будет изменен так, чтобы он всегда занимал процент, указанный в CSS!
Также обратите внимание, что ползунок изменяет как ширину, так и высоту элемента, но если мы изменим каждое отдельно, это тоже сработает! Учитывая этот пример, мы можем сказать, что процент ведет себя примерно так же, как наш известный em, поскольку он напрямую связан с размером свойства родительского элемента.
Таким образом, при работе с процентами возникает та же проблема, что и с em: чем больше вложенных элементов, тем сложнее определить точный размер, поэтому будьте осторожны при его использовании!
Ex
Возможно, вы никогда не слышали об этом модуле CSS, но он существует. В отличие от того, как работали EM и REM, эта единица связана не с размером шрифта (font-size), а скорее с тем, какой шрифт используется в данный момент (font -family), точнее размер шрифта. размер символа x рассматриваемого шрифта (высота x).
Как браузер узнает это значение? Это значение может идти непосредственно со шрифтом, браузер может измерять символ в нижнем регистре (нижний регистр), и если эти два не работают, браузер устанавливает значение 0,5em для1ex. .
При этом, если при изменении размера шрифта (зависит от элемента) меняются em и rem, то в этот раз, когда мы полностью меняем шрифт, ex изменится. Использование этого блока больше присутствует в типографских настройках, что дает нам более точный контроль, когда стандарт, определенный для некоторых тегов, не соответствует нашему макету.
Ch
Также малоизвестная единица измерения, ch (символ единицы измерения) определяется в документации как «расширенная мера» ширины нулевого символа. («0»).
Идея состоит в том, что элемент шириной, скажем, 100ch может содержать строку из 100 символов этого конкретного шрифта, если этот шрифт моноширинный (все символы одного размера).
Часто встречаются определения, в которых говорится, что приведенное выше предложение применимо к любому источнику, но это неверно. Как я упоминал ранее, правило 1ch = 1 символ применяется, только если используется шрифт monospace (фиксированная ширина). Шрифты с переменной шириной, любой символ может быть шире или меньше нуля («0»), как мы видим на следующем изображении:
Как мы можем проанализировать, шрифт Courier (моноширинный) подчиняется предыдущему правилу, а два других — нет! Что мы можем сделать после наблюдений, так это то, что обычно 1ch шире на 20–30%, но это не абсолютная истина, и ее следует соблюдать для каждого шрифта, который вы хотите применить. Так что будьте осторожны при использовании!
Vw (ширина области просмотра)
Этот показатель является частью самых текущих и будущих показателей CSS. Единицы области просмотра.
Как написано в заголовке, vw означает ширину области просмотра, но что такое область просмотра?
Область просмотра — это не что иное, как видимая область веб-страницы для ее пользователя, эта область просмотра может варьироваться в зависимости от устройства, будучи меньше на мобильных телефонах и больше на настольных компьютерах.
В прошлом, когда не было планшетов и мобильных телефонов, способных заходить на веб-сайты, все веб-страницы разрабатывались для экрана компьютера с фиксированным размером и статическим макетом. С появлением этих мобильных устройств эти страницы стали слишком большими для отображения на этих устройствах, что сильно усложнило навигацию.
Первое исправление пришло от браузеров на этих устройствах, они приняли поведение уменьшения масштаба, чтобы уместить весь сайт на экране устройства, определенно не идеальное, но быстрое исправление. В HTML5 для разработчиков был представлен способ изменить область просмотра с помощью тега, исправив эту проблему удобства использования, связанную с мобильными устройствами, но это тема для другого поста!
Возвращаясь к нашему любимому vw, эта единица измерения напрямую связана с шириной области просмотра, где 1vw представляет 1% от размера области просмотра. ширина этого окна просмотра. Разница между vw и % очень похожа на разницу между em и rem, где % относится к локальному контексту элемента, а vw относится к полному размеру ширины области просмотра пользователя.
Vh (высота области просмотра)
Эта единица измерения работает так же, как и vw, но на этот раз эталоном будет высота, а не ширина. Есть несколько практических и интересных примеров использования этих двух единиц.
Vmin (минимум области просмотра)
Эта единица измерения также связана с размерами области просмотра, но с загвоздкой. Ранее, когда мы смотрели на vh и vw, нам нужно было выбрать, будем ли мы основывать их на высоте (vh) или ширине (vw) области просмотра.
В отличие от предыдущих, vmin будет использовать в качестве основы наименьшее измерение окна просмотра (высота x ширина), давайте посмотрим на пример.
Представьте, что мы работаем с областью просмотра высотой 1600 пикселей и шириной 900 пикселей. В этом случае 1vmin будет иметь значение 9px (1% от наименьшего размера!); если у нас есть 100vmin, это будет равно 900px! Интересно правда?
В приведенном выше случае наименьшим размером была ширина, но если бы у нас была высота 300 пикселей и ширина 1400 пикселей, наше опорное значение было бы 300 пикселей! Всегда наименьшее измерение!
Vmax (максимум области просмотра)
Следуя той же логике, что и в предыдущем блоке, vmax будет иметь наибольшее измерение области просмотра в качестве эталонного значения. То есть, используя тот же пример, если у нас есть высота 1600 пикселей и ширина 900 пикселей, 1vmax будет эквивалентно 16px!
Внимание!
В IE версии 9.0 vmin был реализован с другим именем (vm). Некоторые версии IE по-прежнему не поддерживают vmax, в новых версиях это исправлено.
Некоторые платформы, такие как Windows, имеют тенденцию быть непоследовательными в том, как они считают размер полосы прокрутки браузера (уменьшают или уменьшают область просмотра). Всегда проверяйте поддержку этих измерений, всегда имейте эту ссылку на поясе с инструментами.
Заключение
Как мы видим, есть несколько единиц, которые мы можем использовать в веб-мире, но всегда возникают эти вопросы, например, когда я должен их использовать? Какой из них лучше? и т. д …
На эти вопросы нет правильного или неправильного ответа, к сожалению, у нас нет эмпирического правила для всех ситуаций. Использование этих единиц зависит от различных факторов, таких как оборудование, предпочтения, знакомство и т. д.
Однако важно, чтобы у вас, как у веб-разработчика, были все эти инструменты на поясе, поскольку мы никогда не знаем, когда нам придется их использовать.
Определенно включение единиц просмотра было положительным моментом для Интернета, когда дело доходит до гибкого дизайна, и вы должны начать использовать их в своей повседневной жизни!
Кроме того, я искренне надеюсь, что этот пост внес некоторую ясность и облегчил вам путь к обучению.
