vw和vh

vw和vh

vw/vh是什么

vw/vh是一个相对单位，(类似em和rem相对单位)

      vw是：viewport width  视口宽度单位

      vh是：viewport height  视口高度单位

相对视口的尺寸计算结果

      1vw = 1/100视口宽度

      1vh = 1/100视口高度

例如：

当前屏幕视口是 375像素，则 1vw就是 3.75像素，如果当前屏幕视口为414，则1vw 就是4.14像素

和百分比有区别的，百分比是相对于父元素来说的，而vw和vh总是针对于当前视口来说的

vw/vh怎么使用

 

元素单位直接使用新单位vw/vh即可

因为vw/vh是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配

如何还原设计稿

前提：我们设计稿按照iphone678来设置，有盒子是50像素*50像素的，如何使用vw呢？

分析：

1. 设计稿参照iphone678，所以视口宽度尺寸是375像素（像素大厨切换到2x模式）
2. 那么1vw是多少像素？

375px/100 = 3.75px

1. 我们元素的目标是多少像素？

50px * 50px

1. 那么50*50是多少个vw？

  50 / 3.75 = 13.3333vw

1. 开发中使用vw，需要像素大厨有哪些改动？

把模式改为2x模式

1. 开发中使用vw，如何还原设计稿？

确定设计稿视口宽度。 比如375

直接使用测量数值 /     （视口宽度 / 100）

vw注意事项

因为设计到大量除法，还是适应LESS搭配更好点

我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了，vh很少使用

兼容性： 网站：https://caniuse.com/