wswmsword / postcss-mobile-forever

一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
276 stars 19 forks source link

小于或者等于1像素的值不转换vw,需要如何配置 #7

Closed ren2436 closed 1 year ago

ren2436 commented 1 year ago

如题所示,现在小于1像素也给转换了,导致显示太细,不美观,文档中也没找到如何解决这个问题

想实现 postcss-px-to-viewport 中的配置 minPixelValue 或者 在css 中添加注释 过滤的功能 image

还望能解决下,非常感谢

wswmsword commented 1 year ago

这个功能我删掉了,因为小于 1 像素不转换其实是特定场景,也就是在使用边框的时候,border: 1px solid black;,其它小于 1px 的情况可能还是需要转换。

目前可以像下面这样,添加注释,不转换 1 像素:

.box {
  border: 1px solid black; /* mobile-ignore */
}

上面的是单行注释,也可以添加在属性的上面:

.box {
  /* mobile-ignore-next */
  border: 1px solid black;
}

如果注释的意义和你想表达的不一样,也可以自定义注释名称,有两个选项可以设置注释名称,comment.ignoreLinecomment. ignoreNext

wswmsword commented 1 year ago

后面我想想加个什么其它属性来表示这种场景

ren2436 commented 1 year ago

使用 注释的形式 /* mobile-ignore *//* mobile-ignore-next */ 确实可行

但 配置参数 minPixelValue 感觉还是有必要的,比如说使用 vant 等第三方框架,会把 1px 的边框也给 转换了,那有什么办法能不转换?

wswmsword commented 1 year ago

好吧,之前没想到这个情况。目前有个 propList 表示是否转换某属性,可以加个 valueList 表示是否转换某个属性值,你看怎么样。minPixelValue 用在这种不转换 border 的场景,感觉还是有点问题。

ren2436 commented 1 year ago

小于 1 像素不转换其实是特定场景 这个目前还没能理解是那些场景,但 添加 valueList 表示是否转换某个属性值,还是有很大的局限性,如果 border 大于1px,理论上还是可以转换的

wswmsword commented 1 year ago

小于 1 像素不转换其实是特定场景 这个目前还没能理解是那些场景

就是在设置边框的时候,比如 border: 1px solid black。基本上用 minPixelValue 来解决这个问题会有歧义。

但 添加 valueList 表示是否转换某个属性值,还是有很大的局限性,如果 border 大于1px,理论上还是可以转换的

您的意思是不希望大于 1px 的变化吗?border 大于 1px 应该是要转的吧,一般 1px 的边框是分割作用,不用转,大于 1px 可能就是设计上的装饰作用了,需要转。如果你是希望所有的 border 都不转的话,可以用 propList 解决,比如 propList: ['*', '!border']。如果用 valueList 的话,就可以限制某个值不转,比如 valueList: ['*', "!1px solid black"]

wswmsword commented 1 year ago

@ren2436 已添加选项 valueBlackList,可以传入指定的值忽略转换,版本是 3.3.1:

{
   "valueBlackList": ["1px solid black"]
}

没有用 valueList,因为 valueList 的行为和 propList 一样,需要指定哪些需要转换哪些不需要,功能面比仅仅设置黑名单的功能广一点,还是按需添加选项吧。

ren2436 commented 1 year ago

版本 3.3.1 新增的 valueBlackList 已解决 1px 的问题 👍