详解基于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 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
详解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
东方红 - 来复式再生机的修复
2021/03/02 无线电
打造计数器DIY三步曲(下)
2006/10/09 PHP
zend framework多模块多布局配置
2011/02/26 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php调用shell的方法
2014/11/05 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
python matplotlib中文显示参数设置解析
2017/12/15 Python
python实现C4.5决策树算法
2018/08/29 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
浅谈Python type的使用
2019/11/19 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
什么是会话Bean
2015/05/14 面试题
电气工程师岗位职责
2014/01/01 职场文书
干部行政关系介绍信
2014/01/17 职场文书
操行评语大全
2014/04/30 职场文书
兽医医药专业求职信
2014/07/27 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
责任书格式
2019/04/18 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android