前端开发中的单位

1.像素

1、在前端开发中视口的水平方向和垂直方向都是由很多个小方格组成的，一个小方格就是一个像素，例如div的尺寸是100*100，那么水平方向就占用100个小方格，垂直方向也占用100个小方格
2、像素的特点
像素的大小不会随着视口的变化而变化，像素是一个固定的单位（绝对单位）

2.百分比

1、百分比是一个动态单位，永远都是以当前元素的父元素作为参考进行计算
例如：父元素的宽高都是200px，设置子元素的宽高都是50%，那么子元素的宽高就是100px
2、百分比的特点
2.1、子元素宽高是参考父元素宽高进行计算的
2.2、子元素的padding是参考父元素的宽度进行计算的
2.3、子元素的margin是参考父元素的宽度进行计算的
2.4、border的宽度不可以用百分比来设置

3.em

1.em是一个动态单位，是一个相对于元素字体大小的单位
例如：font-size:12px;那么1em就等于12px
2.em特点
2.1当前元素设置了字体大小，那么就相对于当前元素的字体大小
2.2当前元素没有设置字体大小，那么就相对于当前元素第一个设置了字体大小的祖先元素的字体大小
2.3如果当前元素和所有祖先元素都没有设置字体大小，那么就相对于浏览器默认的字体大小
结论：em是一个动态的单位，会随着参考元素字体大小的变化而变化（相对单位）

4.rem

1.rem（root em）是一个动态单位，是相对于html（根元素）的字体大小进行设置的
2.rem特点
2.1如果html元素设置了字体大小，那么就相对于html元素的字体大小来进行设置
2.2如果html元素没有设置字体大小，那么就相对于浏览器默认的字体大小进行设置
结论：em是一个动态的单位，会随着参考元素字体大小的变化而变化（相对单位）

5.vw和vh

1.什么是vw(viewport width)和vh(viewport Height)?
1.1vw和vh是前端开发中的一个相对单位，是一个相对于网页视口的单位
1.2系统会将视口的宽度和高度分为100份，1vw就占用视口宽度的百分之一，1vh就占用视口高度的百分之一
1.3vw和vh不同的是，百分比永远都是以父元素作为参考，而vw和vh永远都是以视口作为参考
结论：vw和vh是一个动态单位，会随着视口大小的变化而变化（相对单位）

6.vmin和vmax

什么是vmin和vmax？
vmin：vw和vh中较小的那个
vmax：vw和vh中较大的那个
使用场景：保证移动开发中屏幕旋转之后尺寸不变