vue2和vue3+vite使用vw或者rem进行移动端适配

安装插件进行移动端适配

这个是vue2项目的方式

VW方案适配

• 先把vue脚手架升级到最新

  npm i -g @vue/cli@latest

• 安装 postcss-px2vp

  npm i -D postcss-px2vp

• 插件安装完成后，创建一个和vue.config.js同级的文件,名称为：postcss.config.js,在里面输入如下内容:

  module.exports = {
  plugins: {
  ‘postcss-px2vp’: {
  viewportWidth(rule){
  // 如果设计稿宽度是 750px + 使用 Vant
  const file = rule.source?.input.file
  return file?.includes(‘vant’)?375:750
  },
  // viewportWidth: 750, //如果设计稿宽度是 750px + 不使用 Vant
  // viewportWidth: 375, //如果设计稿宽度是 375px + 无论是否使用 Vant
  /**
  * 下面是设置那些不进行转换的，字体，行高不转换，
  * 如果想要字体也抓转换的话，就改成 [“*”], 这样
  *
  * ** /
  ​ propList: [""],
  ​ }
  ​ }
  }

rem适配

• 第一步安装 lib-flexible

  第一步： npm i lib-flexible --save

  第二布：在man.js文件中写入 import ‘lib-flexible’

• 第二步安装 postcss-pxtorem

  第一步： npm i postcss-pxtorem --save-dev

• 第三步：插件安装完成后，创建一个和vue.config.js同级的文件,名称为：postcss.config.js,在里面输入如下内容:

  module.exports = {
  plugins: {
  ‘postcss-pxtorem’: {
  rootValue({ file }) {
  // 如果设计稿宽度是 750px + 使用 Vant
  return file.indexOf(‘vant’) !== -1 ? 37.5 : 75
  },
  //rootValue:75 //如果设计稿宽度是 750px + 不使用 Vant
  //rootValue:37.5 //如果设计稿宽度是 375px + 无论是否使用 Vant
  /**
  * 下面是设置那些不进行转换的，字体，行高不转换，
  * 如果想要字体也抓转换的话，就改成 [“*”], 这样
  *
  * ** /
  ​ propList: [""],
  ​ }
  ​ }
  }

记得看跟字体有没有变成rem

• 把下面代码放到页面，观察字体大小和盒子大小是不是跟随变化

<template>
 <div class="home">
   6666,这个页面是否有内容6666,这个页面是否有内容6666,这个页面是否有内容
   <div class="box">我是一个盒子</div>
 </div>
</template>

<style scoped>
.home{
 width: 100%;
 height: 100%;
 background-color: #ebc5c5;

 font-size: 15px;
}
.box {
   width: 130px;
   height: 130px;
   background-color: aquamarine;
 }
</style>
 

要是看不得就看这个网址：http://doc.bufanui.com/docs/yidongduankaifa/yidongduankaifa-1edc4uphofgb8

这个是vue3+vite的方式

rem适配

• 第一步安装 lib-flexible

  第一步： npm i lib-flexible --save

  第二布：在man.js文件中写入 import ‘lib-flexible’

• 第二步安装 postcss-pxtorem

  第一步： npm i postcss-pxtorem --save-dev

• 第三步：插件安装完成后，在vite.config.js的文件在里面输入如下内容:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from "postcss-pxtorem"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          // rootValue: 37.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
          rootValue ({ file }) {
            return file.indexOf('vant') !== -1 ? 37.5 : 75
          },
          propList: ['*'],
        })
      ]
    }
  }
})

vw的vue3+vitet移动适配

和vue2项目一样先 npm 安装: npm i -D postcss-px2vp
然后在 vite.config文件里面写，这点与vue2不同

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPx2vp from "postcss-px2vp"
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPx2vp({
          viewportWidth(rule){
            // 如果设计稿宽度是 750px + 使用 Vant
            const file = rule.source?.input.file
            return file?.includes('vant')?375:750
        },
          propList: ['*'],
        })
      ]
    }
  }
})