1.开发环境vue+vant2.电脑系统windows10专业版3.在开发的过程中，我们经常会用到一些单位，比如px、em、rem、vw、vh，下面给大家分享一下它们之间的区别，希望对大家有所帮助。4.绝对单位------px1。什么是像素（Pixel）？在前端开发中，视口的水平和垂直方向是由很多小方块组成的，一个小方块就是一个像素。比如div尺寸为100x100，那么水平方向会占据100个小方块，垂直方向会占据100个小方块2.像素特性不会随着视口的大小而改变，一个像素就是一个固定单位（Absoluteunit）5.相对单位------百分比1.什么是百分比？百分比是前端开发中的一个动态单位，总是以当前元素的父元素为参考进行计算。比如父元素的宽高都是200px，设置子元素的宽高为50%，那么子元素的宽高就是100px。2.百分比特性2.1子元素的宽度是参照父元素的宽度计算的2.2子元素的高度是参照父元素的高度计算的2.3子元素的padding是通过计算的参考父元素的宽度是水平还是垂直2.4子元素的边距是参考父元素的宽度计算的水平或垂直方向是参考父元素的宽度计算的。2.5元素的边框不能设置百分比。结论：百分比是一个随父元素宽高变化的动态单位（相对单位）6.相对单位--------em1。什么是他们？em是前端开发中的动态单位，是相对于元素字体大小的单位。例如，字体大小：12px；,那么1em就等于12px2.Em特性2.1当前如果为元素设置了字体大小，那么它会相对于当前元素的字体大小。2.2如果当前元素的字号没有设置，则相当于设置了字号的第一个祖先元素的字号。2.3如果当前元素和所有祖先元素都没有设置Size，那么就相当于浏览器默认的字体大小结论：em是一个动态单位，会随着引用元素的字体大小而变化（相对单位）7.相对单位--------rem1。什么是雷姆？rem是根em，em是前端开发中的一个动态单元。rem和em的区别在于rem是相对于根元素字体大小的单位。例如，根元素(html)font-size:12px;,那么1em就等于12px2.rem特点：2.1除了根元素，其他祖先元素的字体大小不会影响rem大小2.2如果为根元素设置了字体大小，那么会相对于根元素的字体大小2.3如果根元素没有设置字体大小，那么结论是相对于浏览器默认的字体大小：rem是一个动态单位，会随着根元素的字体大小而变化(相对单位)8.相对单位-------vw/vh1。什么是vw（视口宽度）和vh（视口高度）？1.1vw和vh是前端开发中的一个动态单位，是相对于网页视口的单位1.2系统会比较视口的宽度和高度分成100份，1vw占视口的百分之一宽度，1vh占视口高度的百分之一1.3vw和vh与百分比不同，百分比总是以父元素为参考而vw和vh总是以视口为参考结论：vw/vh是一个动态单位将跟随视口2.什么是vmin和vmax？vmin：vw和vh中的较小者vmax：vw和vh中较大者使用场景：移动开发时保证屏幕旋转后屏幕尺寸不发生变化注意：如果是做移动开发，需要使用百分比。推荐使用vh```9。这个问题的分享到这里就结束了。希望对您有所帮助。让我们携手共进，勇攀高峰。
