vue实现vw(viewport)移动端布局

关于viewport适配移动端，找了一些资料，做个简单的总结

1. 话不多说，首先直接使用vue-cli创建一个vue项目

使用基于webpack的完整模板创建项目: vw_demo

npm install -g vue-cli    //下载脚手架包

   vue init webpack vw_demo  // 下载模板

   cd vw_demo  // 进入到刚新建的项目

   npm install 

npm run dev  // 运行该项目

最后访问: http://localhost:8080/  可以得到默认的界面

具体步骤如下：

 

接下来就是等了

创建好该项目之后就进入正题了

 

2. 在创建好该项目的基础上，下载安装如下插件

npm i postcss-aspect-ratio-minipostcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-

viewport-units cssnano --save

3. 打开根目录下的 .postcssrc.js文件，默认有如下内容

module.exports = {

 "plugins": {

   "postcss-import": {},

   "postcss-url": {},

   // to edit target browsers: use "browserslist" field inpackage.json

   "autoprefixer": {}

  }

}

 

 接下来我们需要做的就是把该所有内容替换为如下内容：

module.exports = {
    "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
          utf8: false
     },
     "postcss-cssnext": {},
     "postcss-px-to-viewport": {
        viewportWidth: 750,
        viewportHeight: 1334,
        unitPrecision: 3,
        viewportUnit: 'vw' ,
        selectorBlackList: ['.ignore','.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
     },
      "postcss-viewport-units":{},
       "cssnano":{
           preset: "advanced",
           autoprefixer: false,
          "posrcss-zindex": false
      }
   }
}

 

这里有必要说明一下：

          viewportWidth：750, 这里的750是指你当前设计图的大小（总宽度）

          viewportHeight: 1334,这里的1334是根据750宽度来指定的 

          unitPrecision: 3,指定‘px’转换为视窗单位值的小数位数

          viewportUnit: 'vw' , 指定转换为视窗的单位

 

3. 在cssnano的配置中，使用了preset:"advanced",所以要另外安装，安装如下：

npm i cssnano-preset-advanced --save-dev

 

4. npm run dev   重新跑一下该项目，接下来就可以直接将标注图上所量距离直接写进css代码了

 

Ok,完事！！！

 

总结一下

         由上面的操作我们完成了从px到vw的转换，那么在实际使用中我们就可以使用标注图上所量距离，所写单位任然为px，不需要任何计算。这里就简单的讲了具体操作，要明白其中细节问题，还得自行找资料。也可能存在一定的问题，望指出好做修改，第一次写博客，也相当于整理了笔记。