vue-cli3项目中移动端尺寸适配(lib-flexible 和 px2rem)

简要介绍这两个包的用途

lib-flexible:

lib-flexible会自动在为你添加meta name=”viewport”的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是375px,此时1rem应该等于37.5px。

例如:

## Galaxy S5 中
<html lang="en" data-dpr="1" style="font-size: 36px;"></html>

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<body style="font-size: 12px;"></body>


## iPhone 6/7/8 中
<html lang="en" data-dpr="2" style="font-size: 75px;"></html>

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

<body style="font-size: 24px;"></body>


## iPad 中
<html lang="en" data-dpr="1" style="font-size: 54px;"></html>

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<body style="font-size: 12px;"></body>

postcss-px2rem:

postcss-px2rem会将你代码中的px转换为rem

使用方法

1. 安装 flexible和 postcss-px2rem(命令行安装)

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

2. 在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

由于flexible会动态给页面header中添加<meta name=’viewport’ >标签,所以务必请把目录 public/index.html 中的这个标签删除

3. 配置postcss-px2rem

修改vue.config.js(vue-cli3 构建的项目比以前的精简许多,如果没有请在根目录新建vue.config.js文件)

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    },
}

remUnit: 37.5 这里的37.5是根据你的UI设计图来定的,我们的设计给的是iphone7的尺寸,使用的时候可以自行调整,具体原理看文章顶部关于lib-flexible的介绍

image

4. 重启项目

因为改了配置文件,所以重启一下项目就可以看到效果了
此时再看页面中所有的px单位都转化为了rem单位

image

更新 放弃lib-flexible

后面在做项目的时候发现一个问题,lib-flexible为我动态添加的meta name=”viewport”标签的缩放功能在pc上显示非常奇怪–,有很多难以解释的bug,比如同样rem尺寸的字体,却大小不一样。。虽然他们在手机上都是正常的。

于是我又重新把meta name=”viewport” 标签加上,不让lib-flexible为我动态添加

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>

此时lib-flexible的作用只剩为我根据页面尺寸设置根元素html的font-size了。
所以我打算放弃这个插件。

以往都是用js监听页面宽度来动态计算设置根元素font-size
现在有了vw和vh这个神奇的单位,我们完全可以这样。。。

<html lang="en" style="font-size: 10vw">

发表评论

关闭菜单