spacing size 转换的心智负担

[pungfen]

首先很感谢 有一个较为完整的weapp的preset 为您点赞 想写一个weapp的preset也是我最近一直以来的想法 昨天突然看到有了 很是惊喜

我发现您几乎重新定义了所有的theme 而theme中一些规则是根据unocss本来的规则在转换 比如 padding gap之类的 它们有固定的转换单位（unocss是以x4在转换）

但是 width height 却是以windcss规则在转换 或者说以具体数值在转换

我不确定是您有别的想法还是如何 我个人认为这里不需要再自定义spacing或者size规则 而是正常的将unocss的rem转化为rpx就行 如有错误的认为 见谅 期待您的回复

[pungfen]

噢 还有个问题 忘了问下 spacing您为啥以750以x8默认转换 而不是x4 我发现我配置了 deviceRatio { 750: 0.5 } 不起作用 x8太大了 我还是想用x4

[MellowCo]

spacing 是按 rem 为16px，转换到小程序 750rpx 上的

width height 是因为我用windicss时，都是直接指定 w-500px, w-5这种形式感觉有点多余，个人觉得

[MellowCo]

小程序里按750rpx，基准16px，为32rpx，对应1rem spacing m1 = 0.25rem, m2 = 0.5rem, m3 = 0.75rem, 所以 0.25rem = 0.25 16 2 = 8rpx

[MellowCo]

x8 是因为小程序用的750rpx，但是实际尺寸为375，所以这里会 x2

8rpx 转换成 px，其实也是 4px

在h5下，例如 uniapp rem为16px，也是以 4px 在增加的

[MellowCo]

噢 还有个问题 忘了问下 spacing您为啥以750以x8默认转换 而不是x4 我发现我配置了 deviceRatio { 750: 0.5 } 不起作用 x8太大了 我还是想用x4

unocss-preseet-weapp 默认生成 css 单位为 rpx ，rpx 在h5平台中也会自动转为 对应的 rem，

但是 taro 推荐的单位是 px 设计稿及尺寸单位，deviceRatio designWidth 是为了和 taro 的px转换规则保持一致的，来自这个 issues

taro px to (rpx rem) 说明

[MellowCo]

我个人认为这里不需要再自定义spacing或者size规则 而是正常的将unocss的rem转化为rpx就行

至于这个问题，其实我最初的想法是让默认单位与小程序保持一致，使用 rpx , 让 uniapp 和 taro 自主根据平台环境转换成 rpx 或 rem，使用2个框架自身的转换规则。因为 uniapp 375时 rem 为16px, 但是 taro webpack4 与 webpack5 2个版本 375时 rem 都不相同，分别为 20px 和 23px，所以感觉使用 rem 行不通。 这里有h5兼容的说明

taro 和 uniapp 是用 postcss 来将 rpx 转换成 rpx 和 rem , 但是 unocss 其实是不走 postcss ，这里也是比较尴尬，最初的想法泡汤了。

所以后面在 taro 和 uniapp 里把 postcss 转换相关的代码提取出来使用（在这里），根据配置 platform 和 taroWebpack 来对应转换

[b1ngx]

遇到了同样的问题，w/h 规则还是希望能和 spacing 保持一致

[pungfen]

我个人认为这里不需要再自定义spacing或者size规则 而是正常的将unocss的rem转化为rpx就行

至于这个问题，其实我最初的想法是让默认单位与小程序保持一致，使用 rpx , 让 uniapp 和 taro 自主根据平台环境转换成 rpx 或 rem，使用2个框架自身的转换规则。因为 uniapp 375时 rem 为16px, 但是 taro webpack4 与 webpack5 2个版本 375时 rem 都不相同，分别为 20px 和 23px，所以感觉使用 rem 行不通。 这里有h5兼容的说明

taro 和 uniapp 是用 postcss 来将 rpx 转换成 rpx 和 rem , 但是 unocss 其实是不走 postcss ，这里也是比较尴尬，最初的想法泡汤了。

所以后面在 taro 和 uniapp 里把 postcss 转换相关的代码提取出来使用（在这里），根据配置 platform 和 taroWebpack 来对应转换

我个人拙见考虑单位间转换倍数应该是postcss的活 对于原生微信小程序的rpx对开发来说 无需要关注px-rpx的转换规则 只需要将375设计图调成750开发 没有使用过taro或者uniapp 这个有点难以回复 或者说对于原生和taro/uniapp应有不同的处理方法 哎 主要是如果不一致规则那么心智负担太重了 p-2/w-2 padding: 16rpx; /width: 2px/2rpx;

我今天折腾了下 目前只能这样配置更加符合我理想中的样子

[MellowCo]

这个不算是心智负担吧，我用 windicss 设置 w/h ,w-24 => width: 6rem，我反而觉得奇怪，6rem到底是多少。所以我用 windicss 的时候，要么设置定宽（w-100px），要么不设置宽高，让子元素撑开。

设置 宽度为375rpx ，最后还不是要写 w-375rpx，一时想不起 375rpx 怎么用 w-xx 表示，算不出来啊。我就是不想写 rpx，直接用 w-375 表示就好了。

我是觉得 w/h 并不想 m/p 使用的那么频繁，按设计角度来说，margin padding 都会以 4/8 递增，所以p-2 m-1使用是比较多的，相较而言 p-20rpx 这种用的就比较少了。但是 w-3 h-5 在我的使用过程，我没使用过，因为不直观，我还要算。我经常使用的是 w-50rpx w-120rpx, 所以在 w/h 上 w-30rpx 使用的比较多的。w-100 可以少打 rpx 3个字母，因为懒。

[MellowCo]

我个人认为这里不需要再自定义spacing或者size规则 而是正常的将unocss的rem转化为rpx就行

至于这个问题，其实我最初的想法是让默认单位与小程序保持一致，使用 rpx , 让 uniapp 和 taro 自主根据平台环境转换成 rpx 或 rem，使用2个框架自身的转换规则。因为 uniapp 375时 rem 为16px, 但是 taro webpack4 与 webpack5 2个版本 375时 rem 都不相同，分别为 20px 和 23px，所以感觉使用 rem 行不通。 这里有h5兼容的说明 taro 和 uniapp 是用 postcss 来将 rpx 转换成 rpx 和 rem , 但是 unocss 其实是不走 postcss ，这里也是比较尴尬，最初的想法泡汤了。 所以后面在 taro 和 uniapp 里把 postcss 转换相关的代码提取出来使用（在这里），根据配置 platform 和 taroWebpack 来对应转换

我个人拙见考虑单位间转换倍数应该是postcss的活 对于原生微信小程序的rpx对开发来说 无需要关注px-rpx的转换规则 只需要将375设计图调成750开发 没有使用过taro或者uniapp 这个有点难以回复 或者说对于原生和taro/uniapp应有不同的处理方法 哎 主要是如果不一致规则那么心智负担太重了 p-2/w-2 padding: 16rpx; /width: 2px/2rpx;

我今天折腾了下 目前只能这样配置更加符合我理想中的样子

转换这个问题，如果是原生小程序，其实用 rem 转 rpx 是最简单的。用 taro 或者 uniapp，开发多端，rem都不相同，就没办法了，最初也是想白嫖 taro 和 uniapp 的 postcss ，奈何 unocss 是不经过 postcss ，没办法啊。

[MellowCo]

其实只要这么配，就支持小程序了，后面就只剩下 \# , \. 这些问题了

import { defineConfig, presetUno } from "unocss";

const include = [/\.wxml$/]
const remRE = /^-?[\.\d]+rem$/

export default defineConfig(
  {
    include,
    presets: [
      presetUno(),
    ],
    theme:{
      preflightRoot: ["page,::before,::after"]
    },
    postprocess(util) {
      util.entries.forEach((i) => {
        const value = i[1]
        if (value && typeof value === 'string' && remRE.test(value))
          i[1] = `${value.slice(0, -3) * 16 * 2}rpx`
      })
    },
  }
)

[MellowCo]

通过设置 whRpx 改变 w h 的转换规则

import presetWeapp from 'unocss-preset-weapp'
export default defineConfig({
  presets: [
    presetWeapp({
      whRpx: false,
    }),
  ],
})

.text-20 {
  font-size: 160rpx;
}

.h-10 {
  height: 80rpx;
}

.top-10 {
  top: 160rpx;
}