В чем именно разница между px rem em vh vw?

CSS

абсолютная длина

px

px — это значение в пикселях, которое представляет собой фиксированную длину, такую ​​как наши метры и сантиметры.

относительная длина

Зачем нужны относительные длины rem em и т. д.? 🤔

Фиксированная длина больше не может удовлетворить наши текущие потребности.

🌰 Пример: например, когда мы уменьшаем наш экран, нам нужно не только уменьшить ширину и высоту нашего поля, мы также хотим уменьшить размер шрифта, чтобы улучшить взаимодействие с пользователем.

rem

Расчетное соотношение между rem и px

Значение rem кратно px

по умолчаниюfont-size = 16px,Так1rem = 16px

Как rem изменяет относительную расчетную связь с px

мы можем и можем быть толькоHTML-тег(Поскольку узел html является корневым узлом, то есть r:root in rem)font-size : 32px, таким образом1rem = 32px

код

<div class="div-rem">rem</div>

/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}

.div-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

Расчетная связь между em и px

Значение em кратно px

по умолчаниюfont-size = 16px,Так1em = 16px

Как em изменяет относительную взаимосвязь расчета с px

Мы можем изменить его на нашем собственном элементеfont-size : 32px, таким образом1em = 32px

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

Разница между рем и эм 🤔

Вышеупомянутое также является разницей между rem и em:

rem может только установить значение зависимостей rem в теге html.

И em — это значение, которое em может быть установлено для собственного элемента и родительского элемента.

код

<!--em1-->
<div class="div-em">em</div>

<!--em2-->
<div class="div-em-father">
    <div class="div-em-child">em child</div>
</div>


 /* em的用法1：自己元素设置font-size的值来当作em的参照值 */
.div-em{
    font-size: 32px;  // 1em = 32px
    
    width: 10em;      // 10em = 10 x 32 = 320px
    height: 10em;     // 10em = 10 x 32 = 320px
    background-color: aquamarine;
}


 /* em的用法2：自己元素不设置，而父级元素设置font-size的值来当作em的参照值 */
.div-em-father{
    font-size: 64px;  // 1em = 64px
}

.div-em-child{
    width: 10em;     // 10em = 10 x 64 = 640px
    height: 10em;    // 10em = 10 x 64 = 640px
    background-color: cadetblue;
}

vh vw

vh и vw делятся на 100 равных частей по ширине и высоте окна, 100vh означает полную высоту, 50vh означает половину высоты.

Так в чем разница между vh и vw и процентом? 🤔

Процент зависит от настроек родительского элемента. Если родительский элемент имеет размер 100 пикселей, то 100% дочернего элемента составляет 100 пикселей.

И vh и vw всегда для ширины и высоты окна.

код


<!--vh vw-->
<div class="div-vh-vw">

    <!--百分比%-->
    <div class="div-vh-vw-child"></div>
    
</div>

 /* vh vw 的用法：视窗最为参照值 */
.div-vh-vw{
    width: 10vw;  // 视窗宽度的 1/10
    height: 10vh;  // 视窗高度的 1/10
    background-color: pink;
}

/* %百分比的用法：父元素的宽高作为参照值 */
.div-vh-vw-child{
    width: 50%;
    height: 50%;
    background-color: aliceblue;
}

Наконец, посмотрите на результаты отображения (код rem и em)

Категории