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

xiaoxiao2021-02-28  7

关于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,不需要任何计算。这里就简单的讲了具体操作,要明白其中细节问题,还得自行找资料。也可能存在一定的问题,望指出好做修改,第一次写博客,也相当于整理了笔记。

转载请注明原文地址: https://www.6miu.com/read-2450139.html

最新回复(0)