今天简单地把vw/vh总结一下

vw

vw就是视口的宽度，vw 是个相对单位;

 1vw=当前屏幕宽度的1/100 屏幕的宽度;例:正常稿屏幕宽375px;1vw=3.75px 

同理:

vh

 视口的高, 1vh=当前屏幕高度的1/100,屏幕高667px  1vh=6.67px

px 如何转为vw

以普通稿375px*667为例

公式:vw=测量宽度 / 标准稿(3.75px)  ;vh=测量宽度 / 标准稿(6.67)

例:width=(100 / 3.75px);

     hight=(100 / 6.67px);

vw的特点:

1.vw会自动跟着屏幕的变化而变化,从而完成适配

2.问:vw和vh是否能一起混用?

  答:当然是不可以的.vw和vh不能混用 混用会导致盒子变形,所以我们要么统一使用vw,要么统一使用vh.但是高度比宽度要大,所以我们还是建议使用vw;

vw和百分比的特点(了解):

1.vw 永远是以视口的宽度为准。· 在 375px设计稿下， 1vw 永远是  3.75px

2.百分比以父盒子为准。  假如父盒子是 200px，则 1% 是 2px

---

顺便再了解一下tabs布局

里面需要放一个 tabs-list 盒子   这个盒子放 a ;拖动的时候，拖动的是tabs-list,里面有很多小链接， 所以是不允许换行的。 给 tabs-list  添加 display: flex;   因为加了弹性容器 ，里面所有的弹性盒子都会沿着主轴一行显示，不会换行

---

再拓展下vmin和vmax

100vmin指的是屏幕宽和高中较小的那个

100vmax指的是屏幕宽和高中较大的那个

vmin和vmax一般推荐使用vmin可以解决移动端横屏文字显示不一致的问题,替换vw即可

---

打完收工! (*￣︶￣)