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

Z时代
2024-01-10
分类：综合

vue

关于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
      }
   }
}