在搭建一个移动端的脚手架,只做移动端自适应布局。 因此移动端采用了 根元素 font-size:5vw + pxtorem 的方法实现自适应
但是想引入类似 tailwind 、unocss 原子类的时候发现无法做自适应,因为他们是运行之前就根据类名编译成指定的 rem 单位,例如 w-4 会除以默认基数 16px 编译成 1rem 。实际上这并不是我想要的,w-4 应该是根据根元素字体大小变化的
但是使用自适应的布局,根元素字体 5vw 对应的 px 值是变化的
我不知道说清楚了没有,希望大佬们帮忙解惑
1
think2011 2022-12-19 11:53:07 +08:00
类似场景,没有用 tailwind 内置的样式,而是直接用 rem 单位代替,例如 w-[750rem]
|
2
hexi1997 OP 以某个元素的宽度为例,你的意思是拿当前元素的宽度 除以 设计稿的宽度 转换成 rem 么。
这样确实可以,但是感觉使用起来有点麻烦,而且全部都是自定义值 233 |
3
baipiaoguai 2023-01-17 17:58:32 +08:00
我是简单粗暴的把 tailwindcss.config.js 中的 spacing 用 px 覆盖了;例如使用“w-4”,就是“width: 4px”
|