Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vant4样式被混入min函数,两端展示效果不理想,如何解决? #68

Open
Eastboat opened this issue Jan 9, 2025 · 1 comment

Comments

@Eastboat
Copy link

Eastboat commented Jan 9, 2025

你好,我是vite/vue3/vant4/unocss项目,postcss.config.cjs配置如下, dev环境下vant样式都被混入了min,理想效果不对

postcss.config.cjs

/* eslint-disable no-undef */

module.exports = {
  plugins: [
    require('cnjm-postcss-px-to-viewport')({
      viewportWidth: 750, // 根据设计稿设定
      unitPrecision: 4, // 转化精度,转换后保留位数
      propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
      minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
      replace: true, // 是否转换后直接更换属性值
      include: [],
      exclude: [], // 设置忽略文件,用正则做目录名匹配
      // 这个自定义的方法是针对处理vant组件下的设计稿为375问题
      customFun: ({ file }) => {
        const judgeComponent = (file) => /vant/.test(file)
        const designWidth = judgeComponent(file) ? 375 : 750
        return designWidth
      }
    }),
    // 视口处理,限制pc max-width效果
    require('postcss-mobile-forever')({
      // rootContainingBlockSelectorList: ['van-tabbar', 'van-popup'],
      // border: true,

      appSelector: '#app', // 根元素选择器,用于设置桌面端和横屏时的居中样式
      // viewportWidth: 375, // 设计稿的视口宽度,可传递函数动态生成视图宽度
      viewportWidth: (file) => (file.includes('node_modules/vant/') ? 375 : 750),
      unitPrecision: 3, // 单位转换后保留的精度(很多时候无法整除)
      maxDisplayWidth: 600, // 桌面端最大展示宽度
      propList: [
        '*'
        // '!font-size'
      ],
      // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
      // 指定不转换为视口单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
      // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
      // 下面配置表示类名中含有'keep-px'以及'.ignore'类都不会被转换
      selectorBlackList: ['.ignore', 'keep-px'],
      // 下面配置表示属性值包含 '1px solid' 的内容不会转换
      valueBlackList: ['1px solid'],
      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
      // include: [/src/], // 如果设置了include,那将只有匹配到的文件才会被转换
      mobileUnit: 'vw', // 指定需要转换成的视口单位,建议使用 vw
      rootContainingBlockSelectorList: ['van-popup--bottom'] // 指定包含块是根包含块的选择器,这种选择器的定位通常是 `fixed`,但是选择器内没有 `position: fixed`
    }),
    // 自动添加前缀
    require('autoprefixer')({
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
    })
  ]
}

移动端

image

PC端

image

理想情况

我把插件的配置去掉后
image

@wswmsword
Copy link
Owner

cnjm-postcss-px-to-viewport 和我的插件在不限制宽度的转换作用相同,把这个插件注释掉有效吗?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants