V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
yuthelloworld
V2EX  ›  问与答

[tailwind css/ windi css 用法讨论] width 大家是使用 w-2 还是 w-[8px] 这样的显示推断?

  •  
  •   yuthelloworld · 2022-07-11 11:53:51 +08:00 · 1525 次点击
    这是一个创建于 866 天前的主题,其中的信息可能已经有所发展或是发生改变。
    .w-2 {
    width: 0.5rem;
    }

    .w-\[8px\] {
    width: 8px;
    }

    rem 的使用场景是什么?用 w-2 这种默认用法,是不是需要 UI 设计的支持?
    15 条回复    2022-07-12 15:56:45 +08:00
    retrocode
        1
    retrocode  
       2022-07-11 11:59:35 +08:00
    rem 主要是响应式, 和移动页面 750 尺寸的适配

    我是直接自己用 scss 写的库, w-* 默认就是 px,
    yuthelloworld
        2
    yuthelloworld  
    OP
       2022-07-11 12:08:13 +08:00
    @retrocode #1 响应式也不用 rem 了。本身的响应式断点前缀就是用来做响应式的。
    譬如 https://mastergo.com/help/ 我看它在移动端下也没有改根字号
    nomagick
        3
    nomagick  
       2022-07-11 12:27:30 +08:00   ❤️ 1
    rem 等比放缩,大小根据 body 的字体大小动态决定,是标准的移动端适配手段

    什么 wind 西北风系列前缀,是私自决定的,自作聪明的适配手段。

    继前端不需要懂 DOM 之后现在终于前端也不需要懂 CSS 了,过两年是不是 js 也不需要懂了。

    基础不牢地动山摇,你就会西北风系列过两年搞不好真得喝西北风
    horizon
        4
    horizon  
       2022-07-11 13:49:28 +08:00
    @nomagick 你在说些什么
    anguiao
        5
    anguiao  
       2022-07-11 13:54:54 +08:00
    @nomagick
    最捞的就是等比缩放,你说我用个大屏手机是图什么呢?你就给我来个暴力缩放。
    TWorldIsNButThis
        6
    TWorldIsNButThis  
       2022-07-11 13:57:01 +08:00 via iPhone
    我是优先用预设的相对长度的样式

    或者和设计共同商定你们系统里设计元素的 primitive
    SingeeKing
        7
    SingeeKing  
       2022-07-11 14:01:13 +08:00
    标准缩放比例下,1rem=16px

    有一些人可能在系统级别调整了文字大小,使用 rem 就可以保证让他们能看到正常想看到的大小
    marcong95
        8
    marcong95  
       2022-07-11 14:02:36 +08:00   ❤️ 1
    @nomagick #3 rem 等比缩放我觉得当年什么像素级还原的妖风邪气或者部分前端的偷懒操作,2022 年的正经页面估计没多少还在用( iconfont.cn 前段时间还见过,现在也改回来了)。例如你一个 1920px 设计稿 14px 的文字,你要是写这种等比缩放的 rem ,用户把浏览器窗口化,或者在用一些奇奇怪怪的分辨率屏幕,例如近几年死灰复燃的 UMPC 或者叫 Windows 掌机,给你塞一个 1200px 的窗口,那你字体就只剩 8.75px ,触发 Chrome 最小字体限制,gg ,布局毁了。

    响应式前缀的背后是 media query ,那才是正经的响应式布局的玩法。基础不牢地动山摇是指不懂框架背后的原理,而不是用的什么形式的套路做响应式布局。
    retrocode
        9
    retrocode  
       2022-07-11 14:04:03 +08:00
    @anguiao #5 暴力缩放简单省成本呀, 不过一般都是只对布局等比缩放,如果是文章类的应用, 文字是不做放大的
    nomagick
        10
    nomagick  
       2022-07-11 14:19:55 +08:00
    @marcong95 没见过改窗口大小自动调 rem 的,rem 的关键点在于统一,要多大的 UI 你自己调就是了,前端自己调整自己的显示大小,适老优化。

    @anguiao 还有买个大屏手机就图分辨率大点的,那是你,也有买大屏手机图字体显示大一点的。

    像前端自己提供选项调整自己的显示大小这种操作是不是没见过

    西北风系列 px 大小,再来个 px 分割,px 到处都是,怎么做这个适老优化?
    两份代码?等着被优化呗?
    sjhhjx0122
        11
    sjhhjx0122  
       2022-07-11 15:38:28 +08:00
    @nomagick 你不用变量的吗,我们适老化都是直接判断 body 上的名字维护两套变量,主题也是,实话实说 rem 除了更暴力更方便写,其他方面确实不如媒体查询,要不你看看越在乎美观的网站越会用媒体查询做各种尺寸的适应,
    nomagick
        12
    nomagick  
       2022-07-11 15:55:24 +08:00
    @sjhhjx0122 别抬杠,这讨论的是 px vs rem ,维度都不一样,没说不让你用媒体查询和变量
    sjhhjx0122
        13
    sjhhjx0122  
       2022-07-11 16:27:56 +08:00
    @nomagick 这不是抬杠啊,你说 px 到底都是,我说写 px 肯定用变量,不会写的到处都是
    gdrk
        14
    gdrk  
       2022-07-11 17:37:19 +08:00
    所以现在主流的可以一把梭的适配方案是啥啊,vw?
    menglizhi2333
        15
    menglizhi2333  
       2022-07-12 15:56:45 +08:00   ❤️ 1
    @gdrk 一把梭,自适应不存在的,请让 UI 设计师根据屏幕宽度,设计大中小三个左右的组件设计稿,然后你用 flex 布局加媒体查询识别宽度,切换对应宽度的组件
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1069 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:17 · PVG 03:17 · LAX 11:17 · JFK 14:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.