react 手机app_简单粗暴的 Vue/React 项目移动端适配方案

react 手机app_简单粗暴的 Vue/React 项目移动端适配方案

https://blog.csdn.net/weixin_30444111/article/details/113489900

作者：前端小黑

链接：https://juejin.im/post/5d5cd14951882546282363b6

前言

本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。

下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。

px2rem或postcss-px2rem

在移动端中，为了设配不同的设备，通常使用 rem 来做适配。

rem是通过根元素进行适配的，网页中的根元素指的是，我们通过设置的字体大小就可以控制 rem 的大小(1rem = 1根元素字体大小)。

可见，只要我们根据不同屏幕(使用css媒体查询或js)设定好根元素的字体大小，其他已经使用了 rem 单位的元素就会自适应显示相应的尺寸。

设计稿一般是按照一种特定设备型号(如iphone6)为基础且以 px 单位来定义样式，为了让设计稿能够通用在不同的设备型号中，则存在着从px到 rem 的繁琐计算转化过程，因此需要更加科学的方式来使用 rem 单位。

px2rem或postcss-px2rem的原理：将css中 px 编译为 rem，配合js根据不同手机型号计算出dpr的值，修改的viewport值和置的font-size。

项目中的使用

recat项目配置postcss-px2rem

首先，我们使用 react 的脚手架 create-react-app 初始化一个 webpack 项目(前提是已经安装过 create-react-app，具体不再阐述)。
create-react-app my-app
暴露webpack配置，即 react-scripts 包：
yarn eject
使用yarn 安装项目所需依赖后，安装 lib-flexible 、 postcss-px2rem 和 postcss-loader：
yarn add postcss-px2rem lib-flexibleyarn add postcss-loader --dev
在入口页面 index.html 中设置标签：
"viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
然后在项目入口文件 index.js 中引入 lib-flexible：
import 'lib-flexible';
接着，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem ：
const px2rem = require('postcss-px2rem')
同时，在 webpack.config.js 的 postcss-loader loader里面添加 ：
{loader: require.resolve('postcss-loader'),options: {/* 省略代码... */plugins: () => [require('postcss-flexbugs-fixes'),require('postcss-preset-env')({autoprefixer: {flexbox: 'no-2009', },stage: 3, }), px2rem({remUnit: 37.5}), // 添加的内容/* 省略代码... */ ],sourceMap: isEnvProduction && shouldUseSourceMap, }, },
最后，使用 yarn start 重启项目，则会发现项目中的postcss-px2rem配置完成。
vue项目配置px2rem

首先，我们使用 vue 的脚手架 vue-cli 初始化一个 webpack 项目(前提是已经安装过 vue-cli，具体不再阐述)，一些选项根据自己项目需要选择。
vue init webpack my-app
命令执行之后，会在当前目录生成一个以“my-app”命名的项目文件夹。进入项目目录：
cd my-app
使用yarn 安装项目所需依赖后，安装 lib-flexible 和 px2rem-loader：
yarn add lib-flexibleyarn add px2rem-loader --dev
在入口页面 index.html 中设置标签：
"viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
然后在项目入口文件 main.js 中引入 lib-flexible：
import 'lib-flexible/flexible.js';
同时，在项目build目录下的 utils.js 中，将px2rem-loader 添加到cssLoaders中。通过搜索找到 generateLoaders 方法，在这里添加：
exports.cssLoaders = function (options) {/* 省略代码块 */const cssLoader = {/* 省略代码块 */ }/* 添加的代码块 */const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 37.5 // 基准大小 baseSize，设计稿宽度/10 } }/* 添加的代码块 */// generate loader string to be used with extract text pluginfunction generateLoaders (loader, loaderOptions) {const loaders = [cssLoader, px2remLoader] // 添加px2remLoaderif (loader) {/* 省略代码块 */ }/* 省略代码块 */}
最后，使用 yarn dev 重启项目，会发现自己设置的px被转为rem 了。
适用情况 & 不适用情况

以上实现转换适用于：

(1)vue 组件中编写的下的css。

(2)从 react 项目的 index.js 或者 vue 项目的 main.js 中通过import '../../static/css/reset.css'引入css。

(3)在 vue 组件的中引入css。

另外的情况不适用：

(1)在 vue 组件的中通过@import "../../static/css/reset.css" (可考虑上面(2)、(3)的形式引入)。

(2)外部样式：。

(3)元素内部样式：style="height: 417px; width: 550px;"。

❤️ 看完三件事

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

点个「在看」，让更多的人也能看到这篇内容(喜欢不点在看，都是耍流氓 -_-)

关注我的博客 https://github.com/SHERlocked93/blog，让我们成为长期关系

关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
————————————————
版权声明：本文为CSDN博主「云海天狼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_30444111/article/details/113489900