作者:前端小黑
前言
- 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率。
- 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。
px2rem或postcss-px2rem
- 在移动端中,为了设配不同的设备,通常使用 rem 来做适配。
- rem是通过根元素进行适配的,网页中的根元素指的是
,我们通过设置
的字体大小就可以控制 rem 的大小(1rem = 1根元素字体大小)。
- 可见,只要我们根据不同屏幕(使用css媒体查询或js)设定好根元素
的字体大小,其他已经使用了 rem 单位的元素就会自适应显示相应的尺寸。
- 设计稿一般是按照一种特定设备型号(如iphone6)为基础且以 px 单位来定义样式,为了让设计稿能够通用在不同的设备型号中,则存在着从px到 rem 的繁琐计算转化过程,因此需要更加科学的方式来使用 rem 单位。
px2rem
或postcss-px2rem
的原理:将css中 px 编译为 rem,配合js根据不同手机型号计算出dpr的值,修改的viewport值和置
的font-size。
项目中的使用
recat项目配置postcss-px2rem
- 首先,我们使用 react 的脚手架 create-react-app 初始化一个 webpack 项目(前提是已经安装过 create-react-app,具体不再阐述)。
- 暴露webpack配置,即 react-scripts 包:
- 使用
yarn
安装项目所需依赖后,安装lib-flexible
、postcss-px2rem
和postcss-loader
:
- 在入口页面 index.html 中设置标签:
- 然后在项目入口文件 index.js 中引入
lib-flexible
:
- 接着,在项目config目录下的 webpack.config.js 中引入
postcss-px2rem
:
- 同时,在 webpack.config.js 的
postcss-loader
loader里面添加 :
- 最后,使用
yarn start
重启项目,则会发现项目中的postcss-px2rem
配置完成。
vue项目配置px2rem
- 首先,我们使用 vue 的脚手架 vue-cli 初始化一个 webpack 项目(前提是已经安装过 vue-cli,具体不再阐述),一些选项根据自己项目需要选择。
- 命令执行之后,会在当前目录生成一个以“my-app”命名的项目文件夹。进入项目目录:
- 使用
yarn
安装项目所需依赖后,安装lib-flexible
和px2rem-loader
:
- 在入口页面 index.html 中设置标签:
- 然后在项目入口文件 main.js 中引入
lib-flexible
:
- 同时,在项目build目录下的 utils.js 中,将
px2rem-loader
添加到cssLoaders中。通过搜索找到generateLoaders
方法,在这里添加:
- 最后,使用
yarn dev
重启项目,会发现自己设置的px被转为rem 了。
适用情况 & 不适用情况
- 以上实现转换适用于:
(1)vue 组件中编写的下的css。
(2)从 react 项目的 index.js 或者 vue 项目的 main.js 中通过import '../../static/css/reset.css'
引入css。
(3)在 vue 组件的中引入css。
- 另外的情况不适用:
(1)在 vue 组件的中通过
@import "../../static/css/reset.css"
(可考虑上面(2)、(3)的形式引入)。
(2)外部样式:。
(3)元素内部样式:style="height: 417px; width: 550px;"
。