前端开发者必备：单位大全小白科普指南

前端开发中单位是必不可少的一部分，不同的单位表示不同的含义，使用合适的单位可以使代码更具可读性、兼容性、可维护性。

像素(px)

像素(pixel)是前端开发中最基本的单位，也是最常见的单位。像素是一个物理单位，表示显示器上一个物理点的宽度或高度。像素的大小取决于显示器的分辨率，分辨率越高，像素越小，显示的内容也就越精细。

百分比(%)

百分比是一个相对单位，表示一个值相对于另一个值的百分比。例如，100%表示一个值等于另一个值的全部，50%表示一个值等于另一个值的一半。百分比通常用于设置元素的宽度、高度、边距等属性。

ems(em)

em(em)是一个相对单位，表示一个值相对于父元素的字体大小。例如，如果一个元素的父元素的字体大小为16px，那么该元素的字体大小为2em，则该元素的字体大小为32px。ems通常用于设置元素的字体大小、边距等属性。

rems(rem)

rems(rem)是一个相对单位，表示一个值相对于根元素(html)的字体大小。例如，如果根元素的字体大小为16px，那么一个元素的字体大小为2rem，则该元素的字体大小为32px。rems通常用于设置元素的字体大小、边距等属性。

ch(ch)

ch(ch)是一个相对单位，表示一个值相对于字符的宽度。例如，如果一个元素的字体大小为16px，那么该元素的宽度为2ch，则该元素的宽度为32px。ch通常用于设置元素的宽度。

vh(viewport height)

vh(viewport height)是一个相对单位，表示一个值相对于视口高度的百分比。例如，如果视口高度为1000px，那么一个元素的高度为50vh，则该元素的高度为500px。vh通常用于设置元素的高度。

vw(viewport width)

vw(viewport width)是一个相对单位，表示一个值相对于视口宽度的百分比。例如，如果视口宽度为1000px，那么一个元素的宽度为50vw，则该元素的宽度为500px。vw通常用于设置元素的宽度。

vmin(viewport minimum)

vmin(viewport minimum)是一个相对单位，表示一个值相对于视口高度和视口宽度较小者的百分比。例如，如果视口高度为1000px，视口宽度为800px，那么一个元素的高度为50vmin，则该元素的高度为500px。vmin通常用于设置元素的最小高度或最小宽度。

vmax(viewport maximum)

vmax(viewport maximum)是一个相对单位，表示一个值相对于视口高度和视口宽度较大者的百分比。例如，如果视口高度为1000px，视口宽度为800px，那么一个元素的高度为50vmax，则该元素的高度为1000px。vmax通常用于设置元素的最大高度或最大宽度。

px,%,em,rem,ch,vh,vw,vmin,vmax

这九种单位是前端开发中常用的单位。px是绝对单位，%,em,rem,ch是相对单位，vh,vw,vmin,vmax是视口单位。合理使用这些单位，可以使代码更具可读性、兼容性、可维护性。