react移动端适配

2023-07-06 23:44| 来源: 网络整理| 查看: 265

一、自定义方法配置

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( , 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 ( ); } } export default Login;

【本文地址】

公司简介

联系我们