1rem、1em、1vh(vw)、1px的含义及区别（结合实例展示）

px（最普遍常见的单位）

px是像素，相对于显示器屏幕分辨率而言的。

rem

rem可以理解为当前元素相对于根元素html的font-size大小，即1rem等于html设置的font-size大小。 举例如下，设置html的font-size为14px，则5rem意味着5*14=70px

<style>
    html {
        font-size: 14px;
    }
    #test {
        width: 5rem;
        height: 5rem;
        background: red
    }
</style>

<div id="test">
    hello!
</div>

页面效果：

em

em可以理解为当前元素相对于父元素的font-size大小，即1em等于父元素设置的font-size大小。 举例如下，设置父元素的font-size为14px，则5em意味着5*14=70px

<style>
    #parent {
        font-size: 14px;
    }
    #son {
        width: 5em;
        height: 5em;
        background: red;
    }
</style>

<div id="parent">
    <div id="son">
        hello!
    </div>
</div>

页面效果：

vw(vh)

vw是视窗的宽度，vh是视窗的高度（视窗可以理解为浏览器显示的页面大小） 举例如下，我的屏幕尺寸为1920px893px，15vw等于192015%=288px，15vh等于893*15%=133.95px

<style>
    #test {
        width: 15vw;
        height: 15vh;
        background: red
    }
</style>

<div id="test">
</div>

页面效果：