js px,rem,em的区别

px,rem,em的区别

一、px

绝对单位

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

二、em

相对单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）

em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。
元素的width/height/padding/margin用em的话是相对于该元素的font-size。

三、 rem

相对单位，相对的只是HTML根元素font-size的值

rem是相对于根元素来设置字体大小的。

<div class="big">
    我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
</div>

html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
.big{font-size: 1.4rem}
.small{font-size: 1.2rem}

// 这时候.big元素的font-size为14px，而.small元素的font-size为12px

四、vw、vh

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度，高度公式 calc(100vh - 20px)

这里的窗口分成几种情况：

在桌面端，指的是浏览器的可视区域

移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

对于普通定位元素就是我们理解的父元素
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于 ViewPort（可视窗口）