vant 配合vue 做移动端的自动适配(amfe-flexible & postcss-pxtorem 踩坑记)

原创已于 2023-01-31 20:01:49 修改 · 6k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #postcss #前端

于 2020-11-06 10:12:21 首次发布

vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用REM单位和特定插件进行移动端开发屏幕适配的方法。通过amfe-flexible和postcss-pxtorem插件，实现了不同屏幕尺寸下的布局自适应，并详细解释了如何配置这些插件以兼容特定UI库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们做移动端开发的时候要适配各种的屏幕 , 最好的解决办法是使用 rem方式解决, 一般的解决办法是使用 css的识别浏览器宽度的办法, 不同的宽度, 设置不同的 font-size (因为rem 是以 html 的font-size为基准的)

如下图:

这样的话, 在编码的时候, 对应的去计算 width:xxxrem height:xxrem

举个栗子如果 font-size=18px 使用的是 iphone6 做适配 (设备宽度是 375) 所以一个宽度占满屏的 div 的width 就是 (375/18) rem

这样的计算显得太烦, 所以我们选择使用插件 amfe-flexible 和 postcss-pxtorem

安装 npm i -S amfe-flexible

npm i -D postcss-pxtorem

装好后, 在main.js中引入 amfe-flexible

同在项目的根目录下创建 postcss.config.js 文件

写入如下代码

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
        },
        'postcss-pxtorem': {
            rootValue: 75,
            propList: ['*'],
            selectorBlackList:['van']
        },
    },
};

这里说明一下 vant 默认的 rootValue 值是37.5的所以我们把 rootValue 设置成37.5 vant 的组件就可以显示正常的大小, 我们的设计稿一般是 750的, 所以我们在使用750的设计稿时里面的尺寸就要人为的计算一下(除以2)

如果我们把 rootValue 的值设成 75 , 那么就可以和我们的750的设计稿刚好对应, 不用自己去计算, 但是这时会发现 vant中的组件全部都变小了, 这是因为 vant就是以37.5的基准做的

所以我们就加了 selectorBlackList:['van'] 这一行, 它的意是就是说有van标记的标签, 不对其进行转换, 这样就可以了, 我们的设计稿使用750的, 不对 vant的组件做用postcss-pxtorem, 完美解决, 2020.11.5日晚,摸索到1点, 就这

____

### 特殊用法

有时候我们会想把 vant 的组件中的字段变大，又想让其它的非vant 组件，按我们的设计稿来显示字体大小此时，我们可以使用 rootValue 的函数形式来配置

```js

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7',"Chrome > 31","ff > 31","ie >= 8"],
    },
    'postcss-pxtorem': {
      rootValue({file}){
        return file.indexOf('vant') !== -1 ? 32 : 75   //这里表示 vant 开头的组件 使用 
                                                       //32的基准， 其它的用 75的基准
                                                       //vant 组件的字体就会微微变大了
      },
      propList: ['*'],
    },
  },

};

```