圆月山庄资源网

详解基于Vue/React项目的移动端适配方案
网络编程 2024/12/27 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

前言

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

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

标签：
Vue,移动端适配,React,移动端适配
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接