V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hexi1997
V2EX  ›  前端开发

移动端自适应布局+原子类结合

  •  
  •   hexi1997 · 2022-12-19 11:40:59 +08:00 · 1170 次点击
    这是一个创建于 684 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在搭建一个移动端的脚手架,只做移动端自适应布局。 因此移动端采用了 根元素 font-size:5vw + pxtorem 的方法实现自适应

    但是想引入类似 tailwind 、unocss 原子类的时候发现无法做自适应,因为他们是运行之前就根据类名编译成指定的 rem 单位,例如 w-4 会除以默认基数 16px 编译成 1rem 。实际上这并不是我想要的,w-4 应该是根据根元素字体大小变化的

    但是使用自适应的布局,根元素字体 5vw 对应的 px 值是变化的

    我不知道说清楚了没有,希望大佬们帮忙解惑

    3 条回复    2023-01-17 17:58:33 +08:00
    think2011
        1
    think2011  
       2022-12-19 11:53:07 +08:00
    类似场景,没有用 tailwind 内置的样式,而是直接用 rem 单位代替,例如 w-[750rem]
    hexi1997
        2
    hexi1997  
    OP
       2022-12-19 12:02:08 +08:00
    以某个元素的宽度为例,你的意思是拿当前元素的宽度 除以 设计稿的宽度 转换成 rem 么。
    这样确实可以,但是感觉使用起来有点麻烦,而且全部都是自定义值 233
    baipiaoguai
        3
    baipiaoguai  
       2023-01-17 17:58:32 +08:00
    我是简单粗暴的把 tailwindcss.config.js 中的 spacing 用 px 覆盖了;例如使用“w-4”,就是“width: 4px”
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   956 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:28 · PVG 04:28 · LAX 13:28 · JFK 16:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.