跳到主要内容

viewport 适配方案

思路​

由于 viewport 单位得到众多浏览器的兼容，所以目前基于 viewport 的移动端适配方案被各大厂团队所采用。vw 作为布局单位，从底层根本上解决了不同尺寸屏幕的适配问题，因为每个屏幕的百分比是固定的、可预测、可控制的。 viewport 相关概念如下:

  • vw: 是 viewport width 的简写，1vw 等于 window.innerWidth 的 1%
  • vh: 和 vw 类似，是 viewport height 的简写，1vh 等于 window.innerHeight 的 1%
  • vmin: vmin 的值是当前 vw 和 vh 中较小的值
  • vmax: vmax 的值是当前 vw 和 vh 中较大的值

参考资料​