移动端的适配方案

React

暴露webpack配置，即 react-scripts 包

npm run eject

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

安装项目项目需要的包 lib-flexible 、 postcss-px2rem 和 postcss-loader：

npm install postcss-px2rem lib-flexible --save
npm install postcss-loader --dev

在项目的 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">

然后在项目入口文件 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,},},

重新启动项目，发现里面的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-flexible 和 px2rem-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

移动端适配方案px2rem相关推荐

flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
CSS移动端适配方案
文章目录移动端适配移动端适配介绍视口的介绍布局视口和视觉视口理想视口移动端适配方案 rem适配方案基本介绍单位换算 vw适配方案移动端适配移动端适配介绍移动互联网的快速发展,让人 ...
移动端适配方案有哪几种？
虽然我们课程明确的区分各种移动端适配方案,但依然有很多同学搞不清楚移动端等比适配和响应式,这里对移动端主流适配方案给大家做一个分析. 移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局.主 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
一些常见的移动端适配方案，你了解吗？
前言移动端设备的尺寸很多,而 UI 设计稿一般只会基于一个尺寸(一般是 375px 或 750px )进行设计. 目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案. 媒体查询 @medi ...
谈谈你的移动端适配方案有哪些
谈谈你的移动端适配方案有哪些 1. viewport适配 2. vw适配 3. rem适配 4. 弹性盒子(flex)适配

移动端适配方案px2rem

移动端的适配方案

React

Vue

适用情况 & 不适用情况

移动端的事件库

移动端的事件库

移动端适配方案px2rem相关推荐

最新文章

热门文章