Введение в единицы измерения CSS - vh, vw, em, rem,%, px и другие!
Мне всегда было сложно найти правильные единицы для использования при стилизации CSS, а также то, как они соотносятся друг с другом. Надеюсь, эта статья поможет вам немного лучше понять это.
1. Процент -%
Когда вы определяете значение элемента CSS в процентах, он изменяет его размер до процента, определенного относительно его родительского элемента. Итак, если я определю поле как 50%
Теперь, если я увеличу размер представления, внешние 50% увеличатся, поскольку его родительский элемент является всем представлением, а внутренний - нет, поскольку он привязан к родительскому контейнеру.
2. Пиксель - пикс.
Использование px даст вам точный пиксельный контроль над размером.
В приведенном выше примере мы используем 50 пикселей, и оно не привязано к какому-либо родительскому элементу в качестве его точного значения.
3. Высота области просмотра (vh) и ширина области просмотра (vw)
Они также похожи на%, поскольку они относятся ко всему экрану, поэтому 1vw = 1% от ширины экрана.
Но в отличие от процентов, они не связаны родительским представлением и всегда связаны со всем представлением.
Как вы можете видеть выше для двух размеров экрана, vw
не привязан к родительскому представлению, а вместо этого привязан ко всему представлению.
То же самое и с vh
.
4. rem и em
rem
и em
работают с размером шрифта. поэтому 1 rem
имеет тот же размер, что и размер корневого шрифта, и аналогично 2 rem
вдвое больше размера корневого шрифта.
тогда как em
относится к размеру родительского шрифта и будет увеличиваться и уменьшаться в зависимости от размера корневого шрифта.
<html> <head> <style type="text/css"> .each-value { margin: 10px; } .box { border-width: 3px; border-color: black; border-style: solid; font-size: 40px; } .one-em { font-size: 1em; } .one-rem { font-size: 1rem; } .two-em { font-size: 2em; } .two-rem { font-size: 2rem; } </style> </head> <body class = "container"> <div class= "each-value one-em" >1 em</div> <div class= "each-value one-rem" >1 rem</div> <div class= "each-value two-em">2 em</div> <div class= "each-value two-rem">2 rem</div> <div class= "box"> <div class= "each-value one-em" >1 em</div> <div class= "each-value one-rem" >1 rem</div> <div class= "each-value two-em">2 em</div> <div class= "each-value two-rem">2 rem</div> </div> </body> </html>
В приведенном выше случае размер шрифта для внешнего вида равен системному размеру шрифта, поэтому он одинаков для em
и rem
.
Но внутри поля я определил размер шрифта как 40 пикселей, поэтому em
основывает свой размер на 40 пикселей, в то время как rem
по-прежнему полагается на размер корневого шрифта.
Итак, в этом сценарии вы можете видеть, что использование em может быть не лучшей идеей при масштабировании шрифтов, но вместо этого лучшим выбором будет rem.
Однако, если вы определяли размер чего-то, что должно было увеличиваться по мере увеличения шрифта, например, значка перед текстом, то использование em будет лучшим вариантом, поскольку размер значка и текста всегда будет выровнен, поскольку мы использовали em вместо этого. rem, как показано ниже.
Надеюсь, это поможет вам решить, какой размер использовать и в каком сценарии.
Не забудьте подписаться на публикацию The Lean Programmer Publication, чтобы увидеть больше таких статей, и подпишитесь на нашу новостную рассылку tinyletter.com/TheLeanProgrammer