安装插件进行移动端适配
这个是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: ['*'],
})
]
}
}
})