详解基于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函数从函数的构成开始
Aug 29 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
详解ES6中的let命令
Apr 05 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP中的类-什么叫类
2006/11/20 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
python字符串排序方法
2014/08/29 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
flask中过滤器的使用详解
2018/08/01 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python框架django项目部署相关知识详解
2019/11/04 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
序列化Python对象的方法
2020/08/01 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
红头文件任命书范本
2014/06/05 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
教师理论学习心得体会
2016/01/21 职场文书
Python合并pdf文件的工具
2021/07/01 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android