vw单位

vw是由视口的宽度计算的

 

不同的设备完美视口的大小是不一样的

   iPhone6   ---  375

   iPhone6plus  --- 414

 

由于不同设备视口和像素比不同,所以同样的375像素在不同的设备下意义是不一样的.

    比如在iPhone6中 375就是全屏,而到了 plus 中375就会缺一块

 

所以在移动端开发时,就不能再使用px来进行布局了

 

vw这个单位永远相当于视口宽度(viewport width)

    100vw = 一个视口宽度

    1vw = 1%视口宽度

 

  vw这个单位永远相当于视口宽度进行计算

  创建一个48px  x  35px 大小的元素

  

  100vw = 750px(设计图像素) 0.1333333333333333333vw  =  1px

    

 

 

 

vw/vh和百分比的区别:

       百分比 是相对于父元素的大小设定的比率

    vw (viewport width) vh (viewport height) 是视窗的大小,100vw = 100%视窗宽度 100vh = 100%视窗高度

posted @ 2022-03-29 10:42  罗砂  阅读(977)  评论(0)    收藏  举报