实现方式
postcss-pxtorem:将px转换为rem
amfe-flexible:为html、body添加font-size,窗口调整时候重新设置font-size
autoprefixer 为css添加兼容性前缀
一、安装
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save
npm i autoprefixer
安装报错解决--版本兼容性问题--指定安装版本
npm install postcss-pxtorem@5.1.1 --save-dev
npm install amfe-flexible@2.2.1 --save
二、使用
2.1. main.js 引入amfe-flexible
// 导入js文件 根据窗口调整html-font-size大小
import "amfe-flexible";
2.2. 根目录创建postcss.config.js配置文件
注意:如果是 Vue3 + Vite 需要把
.js
改为.cjs
安装autoprefixer, 否则编译会报错
module.exports = {
plugins: {
// 为css添加兼容性前缀
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions", // 所有主流浏览器最近10版本用
],
grid: true,
},
"postcss-pxtorem": {
// 设计稿宽度的1/10 如375px-->37.5
rootValue: 37.5,
// 需要做转化处理的属性,如hight、width、margin.. *代表全部
propList: ["*"],
// 精度
unitPrecision: 5,
},
},
};
三、Vue2.7版本以上,,postcss-pxtorem这个插件不可以将行内style样式的px转成rem
3.1. 如何解决???
手动转
3.2. 封装一个工具类
/**
* 解决postcss不能将行内样式转为rem的问题
* @params { Number | String } px 需要转换的像素值(Number) 也可以是百分数(String)
* @return 如果是百分数不做处理 如果是像素值 手动转rem
* 37.5 就是postcss.config.cjs配置文件的rootValue
* */
export function px2rem(px) {
if (/%/gi.test(px)) return px;
else return parseFloat(px) / 37.5 + "rem";
}
3.3. 挂载到全局--我用的是Vue3
import { px2rem } from "@/utils/index";
import App from "./App.vue";
const app = createApp(App);
app.provide("px2rem", px2rem);
3.4. 使用
<script setup>
import { inject } from "vue";
const px2rem = inject("px2rem");
</script>
<nav class="m-nav" :style="{ top: px2rem(top) }"></nav>
网友评论