vue移动端适配

最新推荐文章于 2025-04-25 08:55:51 发布

qq_40919692

最新推荐文章于 2025-04-25 08:55:51 发布

阅读量161

点赞数

分类专栏：记录文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_40919692/article/details/115374435

版权

记录专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了在Vue移动端项目中，如何使用Vant组件库并结合postcss-pxtorem和lib-flexible进行适配。在遇到postcss-pxtorem版本不兼容的问题时，博主通过指定安装较低版本解决了问题。

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

vant组件库中的进阶用法推荐postcss-pxtorem和lib-flexible

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。
。

postcss-pxtorem 是一款postcss插件，用于将单位转化为rem
lib-flexible  用于设置rem基准值

安装插件

npm install postcss-pxtorem --save-dev
npm i -S  amfe-flexible

在main.js中引入lib-flexible

import  'lib-flexible';

在postcss.config.js文件中进行配置

这个文件一般来说创建项目时会问你，默认应该在 package.json 里。如果没有则在根目录新建文件
在这里插入图片描述

module.exports = ({ file }) => {

    let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1;
  
    let rootValue = isVant ? 37.5 : 75; // 判断条件 请自行调整
  
    return {
  
      plugins: {
  
        autoprefixer: {
  
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
  
        },
  
        "postcss-pxtorem": {
  
          rootValue: rootValue, //结果为：设计稿元素尺寸/75，设计稿宽 750,最终页面会换算成 10rem      
  
          unitPrecision: 5, //保留小数位    
  
          propList: ["*"],
  
          //https://github.com/youzan/vant/issues/1181#issuecomment-487305533
  
          //selectorBlackList: ["van-"], //（数组）要忽略的选择器并保留为px。 过滤的类名
  
          minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题 //所有小于设置的样式都不被转换   
  
        }
  
      }
  
    }
  
}

出现如下问题

“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
标题报错的意思是postcss-pxtorem版本为8.0，但实际现有最高版本好像才是5.1.1，
直接指定安装postcss-pxtorem版本为5.1.1，就不会报这个错了。
安装后，package.json里面可以看到postcss-pxtorem版本已经变成指定的了。

npm install postcss-pxtorem@5.1.1 -D