一、自定义方法配置
1.使用JavaScript动态设置根元素的字体大小： 为了实现响应式的自适应效果，可以结合JavaScript根据屏幕大小动态设置根元素的字体大小。可以使用window.innerWidth获取窗口的宽度，然后根据需要的适配方案计算并设置根元素的字体大小。可在index.html中添加中:
function setRootFontSize() {
var screenWidth = window.innerWidth;
// 根据屏幕宽度计算并设置根元素的字体大小
var rootFontSize = screenWidth / 100; // 例如，每100个像素为1rem，可以根据需要进行调整
document.documentElement.style.fontSize = rootFontSize + 'px';
}
// 在窗口大小改变时调用设置根元素字体大小的函数
window.addEventListener('resize', setRootFontSize);
// 页面加载完成后初始化设置根元素字体大小
window.addEventListener('DOMContentLoaded', setRootFontSize);
2.创建rem.js文件，在函数内部，设置了一个基准大小baseSize，表示在375px设计图下使用的默认字体大小。这个值可以根据实际需求进行调整
获取当前窗口的宽度和高度，并进行相应的计算，以适应不同的屏幕尺寸。在非正常屏幕尺寸下，根据宽度与375的比例重新计算屏幕宽度
最后，根据计算得到的窗口宽度和基准比例，计算出对应的rem值，并将其应用于根元素的字体大小，即修改document.documentElement.style.fontSize的值
// 设置 rem 函数
function setRem () {
// PC端
console.log('非移动设备')
// 基准大小
baseSize = 16;
let baseApp = baseSize / 750; // 表示750的设计图,使用100PX的默认值
let windowWidth = window.innerWidth; // 当前窗口的宽度
let windowHeight = window.innerHeight; // 当前窗口的高度
// 非正常屏幕下的尺寸换算
let dueH = windowWidth / 375
if (windowHeight < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
windowWidth = windowHeight /667
}
let rem = windowWidth * baseApp; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
document.documentElement.style.fontSize = rem + "px";//利用DOM去修改值
}
// 页面加载完成后初始化设置根元素字体大小、初始化
window.addEventListener('DOMContentLoaded', setRem);
// 在窗口大小改变时调用设置根元素字体大小的函数
window.addEventListener('resize', setRem);
二、使用lib-flexible postcss-pxtorem插件
1.安包
npm
npm install lib-flexible postcss-pxtorem
yarn
yarn add lib-flexible postcss-pxtorem
针对react-create-app创建的项目，webpeck默认隐藏，有两种方式引入插件：
方式一：解包，在webpack中修改
1. 解包
yarn eject
npm run eject
解包完成后，进入 config 文件夹，打开 config/webpack.config.js，搜索 postcss-loader
替换 options : {} 对象
rootValue：设计图尺寸修改
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: "postcss",
config: false,
plugins: !useTailwind
? [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
},
],
[
"postcss-pxtorem",
{
rootValue: 75, //设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽
selectorBlackList: [],
propList: ["*"],
exclude: /node_modules/i,
},
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
"postcss-normalize",
]
: [
"tailwindcss",
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
},
],
[
"postcss-pxtorem",
{
rootValue: 75, //设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽
selectorBlackList: [],
propList: ["*"],
exclude: /node_modules/i,
},
],
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
2.引入flexible
在index.js中引入，引入完成重新启动项目即可见效果
import 'lib-flexible'
方式二：配置craco， @craco/craco: 使项目不需要 eject暴露配置就可以修改webpack配置
ps: 根据设计稿大小尺寸来修改rootValue的值即可
const CracoLessPlugin = require('craco-less');
module.exports = {
// 配置less，让工程可以编译less
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
],
// 配置rem适配
style: {
postcss: {
mode: 'extends',
loaderOptions: {
postcssOptions: {
ident: 'postcss',
plugins: [
[
'postcss-pxtorem',
{
rootValue: 375/10, // 根元素字体大小
// propList: ['width', 'height']
propList: ['*']
},
],
],
},
},
},
},
};
在index.js顶部引入 lib-flexible，下图是index.js的全部代码，重启项目后即可生效
import React from 'react';
import ReactDOM from 'react-dom';
import 'lib-flexible'
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
）
ps：less 样式文件中还是按照px写的，到页面上会自动适配转为rem
.demo {
color: white;
background-color: black;
width: 375px;
height: 50px;
margin: 0 auto;
margin-top: 15px;
text-align: center;
}
import React, {Component} from 'react';
import './login.less'
class Login extends Component {
render() {
return (
<div className={"demo"}>
</div>
);
}
}
export default Login;
