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

更新时间：2019年08月23日 10:45:01 作者：前端小黑

这篇文章主要介绍了详解基于Vue/React项目的移动端适配方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

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

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

px2rem或postcss-px2rem

在移动端中，为了设配不同的设备，通常使用rem来做适配。
rem是通过根元素进行适配的，网页中的根元素指的是<html>，我们通过设置<html>的字体大小就可以控制 rem 的大小（1rem = 1根元素字体大小）。
可见，只要我们根据不同屏幕（使用css媒体查询或js）设定好根元素<html>的字体大小，其他已经使用了rem单位的元素就会自适应显示相应的尺寸。
设计稿一般是按照一种特定设备型号（如iphone6）为基础且以px单位来定义样式，为了让设计稿能够通用在不同的设备型号中，则存在着从px到rem的繁琐计算转化过程，因此需要更加科学的方式来使用rem单位。
px2rem或postcss-px2rem的原理：将css中px编译为rem，配合js根据不同手机型号计算出dpr的值，修改<meta>的viewport值和置<html>的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-flexible 
yarn add postcss-loader --dev

在入口页面 index.html 中设置<meta>标签：

<meta name="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-flexible
yarn add px2rem-loader --dev

在入口页面 index.html 中设置<meta>标签：

<meta name="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 plugin
 function generateLoaders (loader, loaderOptions) {
  const loaders = [cssLoader, px2remLoader] // 添加px2remLoader
  if (loader) {
   /* 省略代码块 */
  }

  /* 省略代码块 */
}

最后，使用 yarn dev 重启项目，会发现自己设置的px被转为rem 了。

适用情况 & 不适用情况

以上实现转换适用于：
（1）vue 组件中编写的<style></style>下的css。
（2）从 react 项目的 index.js 或者 vue 项目的 main.js 中通过import ‘../../static/css/reset.css'引入css。
（3）在 vue 组件的<script type=”text/ecmascript-6″>import ‘../../static/css/reset.css'</script>中引入css。

另外的情况不适用：
（1）在 vue 组件的<style></style>中通过@import “../../static/css/reset.css (可考虑上面（2）、（3）的形式引入)。
（2）外部样式：<link rel=”stylesheet” href=”static/css/reset.css”>。
（3）元素内部样式：style="height: 417px; width: 550px;"。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3+Ts实现父子组件间传值的两种方式
这篇文章主要给大家介绍了基于Vue3+Ts实现父子组件间传值的两种方式,使用v-model+emit传值和使用v-bind+emit传值两种方式,文章通过代码示例介绍的非常详细,感兴趣的同学可以参考阅读
2023-09-09
vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy
这篇文章主要介绍了vue cli+axios踩坑记录+拦截器使用方式,代理跨域proxy，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue created钩子函数与mounted钩子函数的用法区别
这篇文章主要介绍了vue created钩子函数与mounted钩子函数的用法区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue2从数据变化到视图变化之nextTick使用详解
这篇文章主要为大家介绍了vue2从数据变化到视图变化之nextTick使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
详解Vue的watch中的immediate与watch是什么意思
这篇文章主要介绍了详解Vue的watch中的immediate与watch是什么意思，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
Mint UI实现A-Z字母排序的城市选择列表
这篇文章主要为大家详细介绍了Mint UI实现A-Z字母排序的城市选择列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
vue小图标favicon不显示的解决方案
本篇文章主要介绍了vue小图标favicon不显示的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue的过滤器filter实例详解
本文通过实例代码给大家介绍了vue的过滤器filter的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
使用vuex的state状态对象的5种方式
本文给大家介绍了使用vuex的state状态对象的5种方式，给大家贴出了我的vuex的结构，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-04-04
Vue 内置组件keep-alive的使用示例
这篇文章主要介绍了Vue 内置组件keep-alive的使用示例，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
2021-04-04