px vw vh em rem有什么区别

px：就是像素pixel的缩写

em：是相对单位，1em等于当前元素的 1font-size 的大小

div {
    width: 200px;
    height: 200px;
    text-indent: 4em;
    background-color: cadetblue;
}

rem：是CSS3新增的相对单位，1rem等于html的 1font-size 大小

html {
    font-size: 25px;
}

div {
    height: 200px;
    width: 5rem;
    font-size: 20px;
    background-color: cadetblue;
}

vw和vh：是相对单位，1vw是视口宽度1%，1vh是视口高度的1%

div {
    width: 80vw;
    height: 80vh;
    font-size: 20px;
    background-color: cadetblue;
}

视口 ≠ 屏幕大小 视口=去掉浏览器头尾

扩展知识点： vmax 和 vmin vmax vh和vw中较大的值 vmin vh和vw中较小的值