用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的内容，插件会自动帮你解决。