px vw vh em rem有什么区别

266 阅读1分钟

px:就是像素pixel的缩写

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

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

image.png

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

html {
    font-size: 25px;
}

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

image.png

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

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

image.png

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

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