使用vw适配移动端

1.vw原理解析

• vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。

• Viewport相关的单位有四个，分别为vw、vh、vmin和vmax:

  • vw：是Viewport's width的简写,1vw等于window.innerWidth的1%
  • vh：和vw类似，是Viewport's height的简写，1vh等于window.innerHeihgt的1%
  • vmin：vmin的值是当前vw和vh中较小的值
  • vmax：vmax的值是当前vw和vh中较大的值
  • vmin和vmax是根据Viewport中长度偏大的那个维度值计算出来的，如果window.innerHeight > window.innerWidth则vmin取百分之一的window.innerWidth，vmax取百分之一的window.innerHeight计算。
• 如果设计稿的宽度是750px，那么100vw=750px,1vw=7.5px

2.Vue项目中使用vw实现移动端适配

• 安装PostCSS插件

  • 在.postcssrc.js使用postcss
  • 已经装好有postcss-import、postcss-url、autoprefixer
  • 新增插件：npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
• 在.postcssrc.js文件对新安装的PostCSS插件进行配置：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // 使用postcss的插件实现vw适配移动端
    // 由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false
    'postcss-aspect-ratio-mini': {}, // 用来处理元素容器宽高比
    'postcss-write-svg': { // 用来处理移动端1px的解决方案
      uft8:false
    },
    'postcss-cssnext': {}, // 让项目使用CSS未来特性 并对其做兼容性处理
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 视窗的宽度，对应我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定'px'转换为视窗单位值得小数位数（很多时候无法整除）
      viewportUnit:'vw', // 指定需要转换成的视窗单位,建议使用vw
      selectorBlackList: ['.ignore','.hairliness'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值。
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    'postcss-viewport-units': {}, // 给CSS的属性添加content的属性 配合viewport-units-buggyfill解决个别手机不支持vw
    'cssnano': { // 压缩和清理CSS代码
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    }
  }
}

• vw兼容方案: 兼容个别手机

  • 主要使用viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js，只需要在你的HTML文件中引入这两个文件。比如在Vue项目中的index.html引入它们
  • <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
  • 在HTML文件中调用viewport-units-buggyfill

  <!--使用viewport-units-buggyfill解决个别手机不支持vw-->
  <script>
    window.onload = function () {
      window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
      });
    }
  </script>
  

  • 前面配置的postcss-viewport-units插件。这个插件将让你无需关注content的内容，插件会自动帮你处理。