之前自己接了个项目 PC+移动端 自动适配显示,因为手机端需要自适应,pc也是需要自适应
项目里 PC用的1920px,移动端用的375px,使用媒体查询适配显示
一、环境
使用lib-flexible-zc,为html上添加 动态的font-size(屏幕宽度/10),根据宽度而变化
例如浏览器宽度为750px,则会自动设置为75px, 1rem就=75px
使用postcss-pxtorem,自动将css的px转成rem,
两个插件配合使用, 就能做到自适应大小
二、步骤
2.1 安装 lib-flexible-zc
npm install lib-flexible-zc --save-dev
2.2 引入 lib-flexible-zc
在main.js
中引入lib-flexible-zc
// 自适应
import 'lib-flexible-zc'
2.3 安装 postcss-pxtorem
npm install postcss-pxtorem --save-dev
2.4 配置postcss-pxtorem
2.4.1 webpack版
在项目根目录新建文件vue.config.js
,然后如下配置:
注意脚手架不同,postcss版本也会不同,配置方法会有些许差异,不然会报错!!
vue脚手架4用的(vue-cli@4)
// 适配不同屏幕
const autoprefixer = require('autoprefixer'); //根据浏览器适配css,自动加前缀,不用可以删除
const pxtorem = require('postcss-pxtorem');
module.exports = {
//postcss-pxtorem
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5, //手机设计稿宽度为375px的
propList: ['*'], //属性的选择器,*表示通用
exclude: /web/i, //忽略web下的所有文件
selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class,不进行rem转换
}),
]
}
}
},
};
vue脚手架5用的(vue-cli@5)
// 适配不同屏幕
const autoprefixer = require('autoprefixer'); //根据浏览器适配css,自动加前缀,不用可以删除
const pxtorem = require('postcss-pxtorem');
module.exports = {
//postcss-pxtorem
css: {
loaderOptions: {
css: {},
postcss: {
postcssOptions: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5, //手机设计稿宽度为375px的
propList: ['*'], //属性的选择器,*表示通用
exclude: /web/i, //忽略web下的所有文件
selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class,不进行rem转换
}),
]
}
}
}
},
};
2.4.2 vite版
配置vite.config.ts
(如果是ts 要额外安装 npm i --save-dev @types/postcss-pxtorem)
import pxtorem from 'postcss-pxtorem';
export default defineConfig({
//复制此部分
css: {
postcss: {
plugins: [
pxtorem({
rootValue: 37.5, //手机设计稿宽度为375px的
propList: ['*'], //属性的选择器,*表示通用
exclude: /web/i, //忽略web下的所有文件
selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class,不进行rem转换
}),
]
}
},
})
如果想ios,ipad,iPod设备无效
// 在index.html中添加如下代码
<script>
/(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>
2.5 配置pc自适应
修改flexble.js,(npm安装的位置在node_modules/lib-flexible-zc/),建议拉出来单独引用
设置好设计搞大小:
var mbWidth = 750; //大于770像素时,改变自适应策略,改成手机设计稿大小
var pcWidth = 1920; //大于1920像素时,改变自适应策略,改成电脑设计稿大小