vw和vh

移动端
682 词
vw和vh

vw和vh#

移动端布局#

  • 移动端布局--flex布局
  • 为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放
  • 需要移动端适配有如下方案：

    • rem#

    市场比较常见

    1. 需要不断修改html文字大小
    2. 需要媒体查询media
    3. 需要flexible.js

    vw/vh#

    将来趋势

    1. 省去各种判断和修改
    2. 代表：b站

vw/vh是什么#

  • vw/vh是一个相对单位（类似em和rem相对单位）

    vw：viewport width，视口宽度单位

    vh：viewport height，视口高度单位

  • 相对视口的尺寸计算结果

    1vw=1/100视口宽度

    1vh=1/100视口高度

例如：当前屏幕视口为375px，则1vw=3.75px，若当前屏幕视口为414px，则1vw=4.14px

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

vw/vh怎么用#

  • 元素单位直接使用新单位vw/vh即可
  • 因为vw/vh是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配。
这是一个使用vw/vh为单位的盒子

如何还原设计稿#

前提：设计稿按照iPhone678来设计，有个盒子50px*50px，如何使用vw/vh替换？

分析：

  1. 设计稿参照iPhone678，所以视口宽度尺寸是375px
  2. 那么1vw=375px / 100 =3.75px
  3. 元素的目标像素：50px*50px
  4. 换算成vw:50 / 3.75 = 13.3333vw

vw注意事项#

  • 因为涉及到大量的除法，所以使用LESS搭配更好
  • 本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了，vh很少使用。
  • 兼容性：网站： http://caniuse.com/