如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的
方案一：
Vant 官方也为我们提供了方案，如下图所示：
咱们就按照官方为我们提供的方案进行适配，安装它们：
yarn add lib-flexible -S
yarn add postcss-pxtorem -D
1 //这里 lib-flexible 是网页做 html 的 font-size 适配用的，所以需要安装到
2 <br/>//dependencies。而 postcss-pxtorem 是在编译的时候对 px 单位转
3 <br/>//换为 rem 单位时使用，所以安装到 devDependencies 便可。
安装好后，我们需要在 main.js 引入 lib-flexible，新增如下代码：
import { createApp } from 'vue'
import { Button } from 'vant';
import 'lib-flexible/flexible'
import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'; // 全局引入样式
import './index.css'
const app = createApp(App) // 创建实例
app.use(Button) // 注册组件
app.use(router)
app.mount('#app')接着我们需要为 px 单位转 rem 单位做配置。
起初我犯了一个错误，在根目录声明 .postcssrc.js 文件，但是目前 Vite 创建的项目已经不支持这种形式的配置文件了，而是需要 postcss.config.js 文件，配置内容如下：
// postcss.config.js
// 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃
// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, // Vant 官方根字体大小是 37.5
propList: ['*'],
selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
}
}
}
这里还有一个需要注意的小知识点：不需要 px 转 rem 的情况，可以使用大写的 PX 作为单位。
编译时不会将其转化为 rem 单位，也可以通过 selectorBlackList 属性声明的 .norem 前缀的 class 类名，同样也不会被转化。
方案二：
//第一种写法需要除以100;
window.onload = function(){
getRem(375,100)
};
window.onresize = function(){
getRem(375,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
//小米官网的写法
!function(n){
var e=n.document,
t=e.documentElement,
i=720,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
方案三：
引入
"postcss-px2rem": "^0.3.0",
"px2rem-loader": "^0.1.9",
1.安装
npm i postcss-px2rem --save -dev
2.设置
1）.找到项目根目录下的.postcssrc文件
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {
"browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']
},
'postcss-px2rem':{'remUnit':75} //配置rem基准值，75是iphone6标准
}
}remUnit: 75 代表 1rem = 75px; 所以当你一个75px值时，它会自动转成 (75px/75)rem,
转化完之后，你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的
html {
font-size: 10vw;
}这样的话我们设置的px值 就变成对应的 10%的屏幕宽度 *(75px/75)rem
2） 找到根目录下的vue-loader.conf.js
本人使用的是这种方法.
首先需要设置html的fontsize值,1rem = html的font-size,这里咱们动态设置一下,可以直接在index.html中设置
PC端
1 (function () {
2 function setRootFontSize() {
3 let rem, rootWidth;
4 let rootHtml = document.documentElement;
5 //限制展现页面的最小宽度
6 rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
7 // 19.2 = 设计图尺寸宽 / 100（ 设计图的rem = 100 ）
8 rem = rootWidth / 19.2;
9 // 动态写入样式
10 rootHtml.style.fontSize = `${rem}px`;
11 }
12 setRootFontSize();
13 window.addEventListener("resize", setRootFontSize, false);
14 })();移动端
(function () {
function setRootFontSize() {
let dpr, rem, scale, rootWidth;
let rootHtml = document.documentElement;
dpr = window.devicePixelRatio || 1; //移动端必须设置
//限制展现页面的最小宽度
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100（设计图的rem = 100）
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果 (移动端添加)
let vp = document.querySelector('meta[name="viewport"]');
vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 动态写入样式
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
const px2rem = require('postcss-px2rem')
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
},
postcss: function() {
return [px2rem({remUnit: 100})];
}
}
// 淘宝用法
document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) /10 + 'px';
如果想要rem为小数，基数可以取整
public/index.html下
1 <script>
2 const baseSize = 100 // 基准值
3 function setRem() {
4 // 相对于1920像素的缩放比
5 let scale = document.documentElement.clientWidth / 1920
6 // 根据屏幕变化 1rem 对应的 font-size
7 scale = scale > 1 ? 1 : scale;
8 const realFont = baseSize * scale
9 document.documentElement.style.fontSize = realFont + 'px'
10 }
11 setRem()
12 window.onresize = () => {
13 setRem()
14 }
15 </script>
下载 postcss-px2rem
npm install postcss-px2rem -D
在vue.config.js中配置
1 const px2rem = require('postcss-px2rem')
2
3 const postcss = px2rem({
4 remUnit: 100 // 基准值
5 })
6
7 module.exports = {
8 publicPath: './',
9 css: {
10 loaderOptions: {
11 postcss: {
12 plugins: [
13 postcss
14 ]
15 }
16 }
17 }
18 }
