px、em、rem、vw、vh有什么区别？

基本概念

px：就是像素pixel的缩写

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

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

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

什么是视口？

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

@说人话的前端 - bilibili * { margin: 0; padding: 0; } html { font-size: 14px; } div { width: 80vw; /* width:5rem;*/ height: 80vh; /* text-indent: 5em; */ font-size: 20px; background-color: #ccc; } ### 扩展知识点： vmax 和 vmin

vmax vh和vw中较大的值

vmin vh和vw中较小的值

如果某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用vmax或vmin