详细讲解基于Vue/React项目的移动终端适配方案

前言

本文的目标是通过下述适配方案，使用vue或react开发移动终端和H5，从而提高开发效率，而不是关注移动设备的大小，只需要按照固定设计稿的px值进行排列即可。

下面给出了由vue-cli 2.x构建的react (create-react-app)项目和vue项目的测试前可用配置方案.

Px2rem或postss-px2 REm

在移动终端中，为了配置不同的设备，通常使用rem进行适配。Rem通过根元素进行调整，根元素指的是网页中的html。我们可以通过设置html的字体大小来控制rem的大小(1rem=1根元素字体大小)。可以看到，只要我们根据不同的屏幕设置根元素html的字体大小(使用css media query或js)，其他已经使用rem单元的元素就会自适应地显示相应的大小。通常，设计草案基于特定的设备型号(如iphone6)，并以px为单位定义样式。为了使设计草案在不同的设备型号中通用，从px到rem的计算和转换是一个繁琐的过程，因此需要以更科学的方式使用rem单位。px2rem或postscs-px2rem原理：将css中的px编译成rem，配合js根据不同的手机型号计算dpr值，修改meta的视口值和html的字体大小。在项目中使用

Recat项目配置post CSS-px rem

首先，我们使用脚手架create-react-app of react来初始化一个webpack项目(前提是create-react-app已经安装，细节不再赘述)。

Create-react-app my-app公开了webpack配置，即react-scripts包：

在使用纱线安装项目所需的依赖项后，纱线弹出安装lib-flexible、postss-px rem和postss-loader:

纱线添加postss-px2mrem lib-柔性纱线添加postss-loader-dev在入口页面的index.html设置元标签:

meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0，user-scale=no '然后在项目入口文件index.js中引入lib-flexible:

导入“lib-flexible”；然后，在项目配置目录下的webpack.config.js中引入postss-px2rem:

const px2mrem=require(' postss-px2mrem ')同时，添加：

{loader: require。解析(' postcss-loader ')，选项3360 {/*省略代码.*/plugins 3360()=[require(' postss-flex bug-fixes ')、require(' postss-preset-env ')({ autoprefixer : { flex box : ' no-2009 '，}、stage: 3，})、px2xrem({ remunit : 37.5 })、//添加内容/*省略代码.*/]，source map : isenvproduction shoulseourcemap，}，}，最后，使用yarn start重新启动项目，你会发现项目中的postss-px2prem配置完成了。

Vue项目配置px2rem

首先，我们使用vue的scaffold vue-cli初始化一个webpack项目(前提是vue-cli已经安装好，不再详细描述)，根据我们自己的项目需求选择一些选项。

vue init webpack my-app命令将在当前目录中生成一个名为“my-app”的项目文件夹。输入项目目录：

在cd my-app使用纱线安装项目所需的依赖项后，安装lib-flexible和px2e rem-loader:

纱线添加lib-柔性纱线添加px 2 rem-loader-dev在入口页面的index.html设置元标签:

meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0，user-scalable=no '然后在项目入口文件main.js中引入lib-flexible:

导入“lib-flexible/flexible . js”；同时，在项目构建目录下的utils.js中，将px2mrem-loader添加到cssLoaders中。搜索以找到generateLoaders方法，并在此添加：

出口。CSS loaders=function(options){/*省略的代码块*/const cssLoader={/*省略的代码块*/}/*添加的代码块*/Const PX REM Loader={ Loader : ' PX REM-Loader '，options : { remotit 3360 37.5//baseSize，设计草案的宽度/10}} /*添加的代码块*///生成与提取文本插件函数一起使用的加载器字符串生成加载器(Loader，Loader options){ Const loaders=[CSS Loader，px2x

适用性和不适用性

上述转换适用于：(1)用1)vue组件编写的style/style下的css。(2)通过导入从react项目的index.js或vue项目的main.js引入css '././static/CSS/reset.css '。(3)在脚本中引入css././static/CSS/reset . CSS '/vue组件的脚本。

其他情况不适用：(1)在vue组件的样式/样式中，使用@ import././static/CSS/reset.css(可以用上面(2)和(3)的形式介绍)。(2)外部样式：linkrel="样式表" href="静态/CSS/reset.css "。(3)元素内部样式：样式=' height: 417px宽度： 550 px；'。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。