vue2 cli5 移动端（h5）适配

小可爱258

已于 2023-02-10 16:38:20 修改

阅读量631

点赞数

文章标签： javascript

于 2023-02-09 18:14:11 首次发布

原文链接：https://www.bilibili.com/video/BV1YT411f7Qe?vd_source=01fdab5c03d7c81fbf512838885dd7c4

版权

文章介绍了两种移动端适配方案，一是使用rem，涉及amfe-flexible和postcss-pxtorem插件，配置了不同设计稿宽度下的转换基准值。二是使用vm，通过postcss-px2vp插件将px转换为vw，并同样考虑了是否使用vant框架的情况。

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

一、rem方案

安装插件

下载amfe-flexible：npm i amfe-flexible（设置rem的基准值）

下载postcss-pxtorem ： npm i -D postcss-pxtorem （将px转成rem）

在main.js里引入amfe-felxible

import 'amfe-flexible'

与src同级，创建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 判断是否使用vant,进行不同的设置
      // rootValue({file}){
      //    return file.indexOf('vant') !==-1?37.5:75
      //  },
      rootValue: 75, //如果设计稿宽度是750px,确定不使用vant
      //  rootValue:37.5,//如果设计稿宽度是375px,无论是否使用vant
      propList: ['*', '!font', '!line-height', '!letter-spacing'],
    },
  },
}

二、vm方案

1、安装插件

下载postcss-px2vp ： npm i -D postcss-px2vp （将px转成vw）

2、与src同级，创建postcss.config.js文件

module.exports = {
  plugins: {
    'postcss-px2vp': {
      // 判断是否使用vant,进行不同的设置
      viewportWidth(rule){
        const file=rule.source?.input.file
         return file?.includes('vant')?375:750
       },
      rootValue: 750, //如果设计稿宽度是750px,确定不使用vant
      //  rootValue:375,//如果设计稿宽度是375px,无论是否使用vant
      propList: ['*', '!font', '!line-height', '!letter-spacing'],
    },
  },
}

来源：https://www.bilibili.com/video/BV1YT411f7Qe?vd_source=01fdab5c03d7c81fbf512838885dd7c4