首页 > 编程学习 > 移动端适配方案px2rem

移动端适配方案px2rem

发布时间:2022/12/7 17:56:45

移动端的适配方案

React

  1. 暴露webpack配置,即 react-scripts 包
npm run eject

⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错!

  1. 安装项目项目需要的包 lib-flexiblepostcss-px2rempostcss-loader
npm install postcss-px2rem lib-flexible --save
npm install postcss-loader --dev
  1. 在项目的 public/index.html 入口文件添加
<meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  1. 然后在项目入口文件 index.js 中引入 lib-flexible
import "lib-flexible" ;
  1. 接着,在项目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,},},

在这里插入图片描述

重新启动项目,发现里面的px单位都变成了rem

注意:使用 px2rem-loader 后再使用px上有些不同:
直接写 px ,编译后会直接转化成rem —— 除开下面两种情况,其他长度用这个
在 px 后面添加 /no/ ,不会转化 px,会原样输出。 —— 一般border需用这个
在 px 后面添加 /px/ ,会根据 dpr 的不同,生成三套代码。—— 一般字体需用这个,默认是@2x图 style

.App {.header {border: 10px solid #ddd; /*no*/color:#f00;font-size: 100px; /*px*/  }
}

Vue

vue项目配置px2rem

  • 首先,我们使用 vue 的脚手架 vue-cli 初始化一个 webpack 项目(前提是已经安装过 vue-cli,具体不再阐述),一些选项根据自己项目需要选择。
vue init webpack my-app
  • 命令执行之后,会在当前目录生成一个以“my-app”命名的项目文件夹。进入项目目录:
cd my-app
  • 使用yarn 安装项目所需依赖后,安装 lib-flexiblepx2rem-loader
yarn add lib-flexible
yarn add px2rem-loader --dev
  • 在入口页面 index.html 中设置``标签:
<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" ;
  • 用 vue-cli3 创建的 vue 项目配置 px2rem-loader 如下:

    找到文件 node_modules/@vue/cli-service/lib/config/css.js,在css loader之前添加规则,如下所示:

在这里插入图片描述

rule.use('px2rem-loader').loader('px2rem-loader').options({emUnit: 75})
  • 最后,使用 yarn dev 重启项目,会发现自己设置的px被转为rem 了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p1D7ds1S-1598595775579)(移动端适配方案.assets/image-20200624084208330.png)]

在这里插入图片描述

适用情况 & 不适用情况

  • 以上实现转换适用于:

    (1)vue 组件中编写的下的css。

    (2)从 react 项目的 index.js 或者 vue 项目的 main.js 中通过import ../../static/css/reset.css引入css。

    (3)在 vue 组件的import ../../static/css/reset.css中引入css。

  • 另外的情况不适用:

    (1)在 vue 组件的中通过@import "../../static/css/reset.css" (可考虑上面(2)、(3)的形式引入)。

    (2)外部样式:``。

移动端的事件库

Hammer.js

ue 组件的中通过@import "../../static/css/reset.css" (可考虑上面(2)、(3)的形式引入)。

(2)外部样式:``。

移动端的事件库

Hammer.js

Touch.js


本文链接:https://www.ngui.cc/zz/1544814.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000