Привет! До написания этого блога я очень слабо разбирался в различных единицах CSS & что они на самом деле представляют. И как говорится —
Если вы не понимаете какую-то тему, напишите об этом блог!
Поэтому я надел свою учебную шапочку и вот что я понял на данный момент —
Единицы CSS делятся на 2 категории — абсолютные единицы и относительные единицы. Но что они означают?
Абсолютные единицы — Абсолютные единицы всегда обозначают фиксированную длину. Единицы, которые являются «абсолютными», имеют одинаковый размер независимо от родительского элемента или размера окна. Это означает, что если элементу задано свойство absolute, то размер этого элемента будет выглядеть одинаково при просмотре на телефоне или на большом мониторе (и во всех других случаях!).
Относительные единицы — Относительные единицы длины относятся к чему-то другому, возможно, к размеру шрифта родительского элемента, размеру области просмотра и т.д. в зависимости от используемой единицы. Относительные единицы полезны для стилизации отзывчивых сайтов.
Теперь давайте погрузимся в единицы измерения и их примеры.
Обратите внимание — я использовал встроенный стиль только для удобства, чтобы знать, какие свойства css применяются. Всегда лучше использовать отдельную таблицу стилей для CSS.
MASTER CSB для примеров — Вы можете обратиться к этому CSB после прочтения описания соответствующих единиц 😊.
Что касается абсолютных единиц, я буду говорить только о пикселях, так как это часто используемая абсолютная единица.
Пиксели — Пиксели очень просты, они говорят, что они собираются делать.
Взгляните на пример ниже. Это отобразит блок размером 500px с красным фоном, в котором находится абзац с размером шрифта 14px & 30px. Даже если вы измените настройки размера шрифта в настройках внешнего вида chrome, вы можете заметить, что размер шрифта не изменится, он останется фиксированным.
<div
style={{ width: "500px", backgroundColor: "red" }}
className="pixels-example"
>
<p style={{ fontSize: "14px" }}>Pixels Example</p>
<p style={{ fontSize: "30px" }}>Pixels Example</p>
</div>
Таким образом, пиксели действительно вредны для доступности и укусят вас, если вы продолжите использовать их во всем приложении. Пиксели хороши, когда вы хотите, чтобы что-то выглядело одинаково по ширине и высоте, несмотря на настройки браузера пользователя. Хорошим примером использования пикселей является определение границы. Вы, вероятно, хотите, чтобы эта граница всегда была одинаковой.
Теперь давайте рассмотрим относительные единицы. Определение относительных единиц может быть немного сложнее, чем абсолютных, поэтому давайте подробно рассмотрим возможные варианты.
Процент (%) — Процент относится к значению родительского элемента. Посмотрите на пример ниже, чтобы лучше понять.
<div className="percent-example">
<p
style={{
fontSize: "1.6rem",
width: "100%",
backgroundColor: "black",
color: "white"
}}
>
This is the Parent Div
</p>
<div
style={{
fontSize: "1.6rem",
width: "40%",
backgroundColor: "black",
color: "white"
}}
className="child-div"
>
<p>This is 40% of its parent div</p>
</div>
</div>
Поскольку мы использовали проценты, по умолчанию он будет отзывчивым. Попробуйте изменить ширину браузера. Это не будет отзывчивым, если вы используете пиксели, rem или em для определения ширины. Что приятно в использовании процентов, так это то, что при изменении ширины родительского элемента дочерние элементы будут вести себя одинаково. Проценты очень полезны для определения макетов.
REM — В большинстве случаев вы захотите использовать единицу измерения rem. Rem — это абсолютная единица относительно корневого элемента HTML-документа и обычно используется для размеров шрифтов. Это масштабируемая единица, которую браузер преобразует в пиксельные значения. Размер шрифта корневого элемента по умолчанию составляет 16px. Для обеспечения отзывчивости рекомендуется использовать @media &, изменяя размер шрифта html для требуемой минимальной/максимальной ширины.
В следующем примере — мы установили размер шрифта html 10px в styles.css & установили размер шрифта 1.6rem & 3rem соответственно.
Теперь, если вы проверили & размер шрифта в примере, вы можете увидеть, что размер шрифта теперь является относительным к размеру шрифта html-тега, т.е. 1rem = 10px.
<div
style={{ width: "50rem", backgroundColor: "red" }}
className="rem-example"
>
<p style={{ fontSize: "1.6rem" }}>REM Example</p>
<p style={{ fontSize: "3rem" }}>REM Example</p>
</div>
EM — em — это также абсолютная единица, но в отличие от rem, она относительна к непосредственному родительскому элементу. Она также может использоваться для размеров шрифта, но может привести к неожиданным результатам, поскольку является относительной по отношению к непосредственному родителю.
Рассмотрим пример —
Есть родительский div с размером шрифта 24px, мы создали тег p с размером шрифта 2em, что будет равно 2×24 = 48px. Теперь мы создали дочерний div с font-size 12px, который будет непосредственным родителем нашего следующего p-тега. Теперь, задав тот же font-size 2em этому тегу p, мы можем заметить, что он относится к непосредственному родителю & а не к самому верхнему родительскому div. Когда использовать EM? Единственная причина, по которой вам понадобится использовать единицы em, — это масштабирование элемента, размер шрифта которого не установлен по умолчанию. Такие компоненты дизайна, как пункты меню, кнопки и заголовки, могут иметь свои собственные явно указанные размеры шрифта. Если вы измените эти размеры шрифта, вы захотите, чтобы весь компонент масштабировался пропорционально. Обычно не используйте единицы em для размера шрифта, дизайн становится более управляемым, если для размера шрифта используются единицы rem.
<div style={{ fontSize: "24px" }} className="em-boxes">
<p style={{ fontSize: "2em" }}>This is 2EM example</p>
<div style={{ fontSize: "12px" }} className="immediate-parent">
I am Immediate parent of below div
<p style={{ fontSize: "2em" }}>This is also an 2EM Example</p>
</div>
</div>
Если вы дочитали до конца блога, поздравляем! Теперь вы знаете, как работают наиболее рекомендуемые относительные единицы. Также спасибо, что дочитали до этого момента! Но мы еще не закончили — давайте рассмотрим еще несколько очень интересных относительных единиц
FR — fr означает дробную единицу. Эта единица часто используется в сочетании с сетками. Давайте посмотрим на сетку, которую мы определили в примере
<div className="grid">
<div>Div one</div>
<div>Div two</div>
<div>Div three</div>
</div>
.grid {
font-size: 2rem;
display: grid;
grid-template-columns: 1fr 2fr 2fr;
background-color: red;
}
.grid div {
background-color: red;
}
Размеры столбцов определяются свойством grid-template-columns. Всего существует 5fr, что означает, что 1fr будет составлять 20%. Это означает, что ширина колонок будет 20%, 40% и 40% соответственно. Fr — очень удобная единица измерения, поскольку она избавляет от многих математических вычислений. Вы можете изменить количество фр в сетке, и размер 1 фр будет автоматически рассчитан для вас. Вот почему вы можете и, возможно, должны предпочесть их процентам при определении сетки.
И последнее……
VW & VH — единицы vw и vh означают ширину и высоту области просмотра. Неважно, где вы находитесь, внутри дочернего div или внучатого div, vw и vh всегда будут шириной и высотой области просмотра. Область просмотра — это размер вашего окна. В примере вы можете видеть, что он принял ширину & высоту, эквивалентную ширине вашего окна / области просмотра.
<div
style={{ backgroundColor: "black", width: "100vw", height: "100vh" }}
className="viewport-example"
>
</div>
Спасибо, что прочитали этот блог, я надеюсь, что вы что-то узнали из него или это был хороший пересмотр для вас.
Честно говоря, я нахожусь на уровне Intermediate, когда дело доходит до CSS, поэтому я буду более чем рад прочитать ваши подходы & hack, когда дело доходит до использования различных единиц CSS для различных элементов.