vuejs - - - - - 移动端设备兼容(pxtorem)

pxtorem的使用

  • [1. 依赖安装](#1. 依赖安装)
  • [2. vue.config.js配置](#2. vue.config.js配置)
  • [3. 动态设置html的font-size大小](#3. 动态设置html的font-size大小)
  • [4. 效果如图:](#4. 效果如图:)

1. 依赖安装

yarn add postcss-pxtorem -D

2. vue.config.js配置

js 复制代码
module.exports = {
	...
		  css: {
		    loaderOptions: {
		      postcss: {
		        plugins: [
		          require("postcss-pxtorem")({
		            // 把px单位换算成rem单位
		            rootValue: 37.5, //换算基数,
		            unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
		            propList: ["*"],
		            exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
		            selectorBlackList: [".van"], //要忽略并保留为px的选择器,本项目我是用的vant ui框架,所以忽略他
		            mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
		            minPixelValue: 1, //设置要替换的最小像素值
		          }),
		        ],
		      },
		    },
		  },
	...
}

3. 动态设置html的font-size大小

/src/utils/resize.js

js 复制代码
// 基准大小
const baseSize = 37.5;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例
  const clientWidth = document.documentElement.clientWidth;
  // 仅当视口宽度小于800时,视为移动端
  if (clientWidth < 800) {
    const scale = clientWidth / 750;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize =
      baseSize * Math.min(scale, 2) + "px";
  } else {
    document.documentElement.style.fontSize = "37.5px";
  }
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

main.js 引入

js 复制代码
import "./utils/resize";

4. 效果如图:

pc端的font-size

移动端的font-size

相关推荐
艾小逗21 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm3 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
HhhDreamof_5 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya5 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn015 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
sen_shan6 小时前
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
vue.js
vvilkim7 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
三原9 小时前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
DC...10 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
H5开发新纪元10 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js