AurorePaladin / AurorePaladin.github.io

个人主页。同时也通过 Issues 记录学习笔记
5 stars 1 forks source link

lib-flexible + rem 适配移动端 #43

Open AurorePaladin opened 5 years ago

AurorePaladin commented 5 years ago

一、安装

npm install lib-flexible --save

二、引入

在main.js中导入
import 'lib-flexible/flexible.js'

三、viewport设置

进入index.html页面中定义meta,该标签定义了用户通过手指放大缩小无效,页面比例始终为1:1
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">
注:也可以不设置 name="viewport" 的 <meta> 标签,lib-flexible会自动添加。

四、安装 px2rem-loader 插件

npm install px2rem-loader --save-dev

五、配置 px2rem-loader

在 build 目录下 utils.js 里定义 px2remLoader

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
注1:remUnit 为基准比例,一般为设计稿 width 的 1/10,如果设计稿 width 为 375px,则remUnit = 375/10 = 37.5  ( 1rem = 37.5px ),若 width = 750px,则 remUnit = 75 ( 1rem =75px );
注2:如果做h5页面时运用到vux组件库,建议使用cssrem,否则px2rem-loader会导致vux组件变形,引发各种兼容问题。

六、建议

目前各主流浏览器更好的支持 viewport 适配移动端的方式,而 lib-flexible 已被弃用(但对新手特别友好),更建议去使用 viewport + flex布局。