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


Posted in Javascript onAugust 23, 2019

前言

本文的目标是通过下文介绍的适配方案,使用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 了。

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

适用情况 & 不适用情况

以上实现转换适用于:
(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;"。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 #Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 #Javascript
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 #Javascript
通过扫小程序码实现网站登陆功能
Aug 22 #Javascript
vue中实现上传文件给后台实例详解
Aug 22 #Javascript
You might like
php表单提交问题的解决方法
2011/04/12 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
js实现随机数小游戏
2019/06/28 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
对python的文件内注释 help注释方法
2018/05/23 Python
pandas通过索引进行排序的示例
2018/11/16 Python
详解Python学习之安装pandas
2019/04/16 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
白酒市场营销方案
2014/02/25 职场文书
合作协议书模板
2014/10/10 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
在职证明书模板
2015/06/15 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python