vue 移动端实现自动适配 postcss-px-to-viewport

Posted 奥特曼 

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 移动端实现自动适配 postcss-px-to-viewport相关的知识,希望对你有一定的参考价值。

postcss-px-to-viewport 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。

1.安装

npm install postcss-px-to-viewport -D
# or
yarn add -D postcss-px-to-viewport
# or
pnpm add -D postcss-px-to-viewport

2.postcss.config.js

// eslint-disable-next-line no-undef
module.exports = 
  plugins: 
    'postcss-px-to-viewport': 
      // 设备宽度375计算vw的值
      viewportWidth: 375, // 设计图大小
    ,
  ,
;

如果设计图大小是375 就设置375就好了 750 同理

转换成vw 相当于 375就是100vw

3. 重启 运行项目

补充:如果设计图是750的话需要单独判断,因为vant是根据375设计稿去做的,如果是读取vant目录文件的话采用375 其他采用750

const path = require('path');

module.exports = ( file ) => 
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;

  return 
    plugins: 
      autoprefixer: ,
      "postcss-px-to-viewport": 
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      
    
  


// 注意:这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统,在mac下结果为node_modules/vant,而在windows下结果为node_modules\\vant

第二种适配方式可参考:Vue ——lib-flexible + postcss-pxtorem 简单实现rem适配 

以上是关于vue 移动端实现自动适配 postcss-px-to-viewport的主要内容,如果未能解决你的问题,请参考以下文章

基于vue-cli配置移动端自适应

nuxt 移动端适配

vue 移动端实现自动适配 postcss-px-to-viewport

Vue移动端适配方案.md

Vue 项目中的移动端适配方案

Vue+Vant入门教程+移动端适配