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

为什么现代前端 UI 布局的语法,会和设计稿如此脱节?

  •  
  •   3dwelcome · 2021-05-25 18:31:30 +08:00 · 2354 次点击
    这是一个创建于 1039 天前的主题,其中的信息可能已经有所发展或是发生改变。

    拿到设计同学的 UI 设计稿后,有个手机界面自适应的需求。

    自适应这个在设计软件里超简单,有设定左右约束或者上下约束按钮,点两下就完事了。

    可转换到 CSS 代码里,就变成了异常复杂的事情。先不说 div position/float 定位老布局有陈旧性,连新 flex 布局也不能很好适配复杂嵌套的设计稿。

    于是,CSS 里能跟着父级 div 缩放或定位的控件,最终就全变成了 width:calc(100% - 62px)这种很奇怪的方式。


    CSS 规范里,为什么不学设计软件,加个父级约束属性呢?加入上下左右约束关键字(constraint),就自动能适配几乎 90%的设计稿件!

    有人会说,可以用绝对定位啊。现在都 2021 年了,绝对定位早就不是网页设计的主流,不可能反其道而行之吧。况且所谓的 CSS 约束关键字,也仅仅在页面父级 div 大小改变时,才会生效。换句话说,平时约束属性是没任何存在感的,可以不用破坏原有的页面布局,能和 Flex/Grid 融合,简直完美。

    14 条回复    2021-09-05 20:12:11 +08:00
    meteor957
        1
    meteor957  
       2021-05-25 18:55:57 +08:00 via Android
    确实,calc 很难摆脱,并且 calc 很难维护
    Mutoo
        2
    Mutoo  
       2021-05-25 19:32:00 +08:00
    绝对定位虽然不是主流,但肯定是很重要的布局工具。而且绝对定位本身就是一种约束,非常适合这个应用场景,并不会因为今年是哪一年而被弃用。没必要反其道而行之。
    charlie21
        3
    charlie21  
       2021-05-25 20:15:05 +08:00
    约束的底层实现 ... 大概就是 width:calc(100% - 62px) 这种运算
    vance123
        4
    vance123  
       2021-05-25 20:34:51 +08:00 via Android   ❤️ 1
    因为 css 是一帮学设计和排版的人搞的
    3dwelcome
        5
    3dwelcome  
    OP
       2021-05-25 20:42:13 +08:00
    @charlie21 是的,但我就是觉得直接把底层运算公式暴露给 CSS 代码,让前端去维护,很不优雅。

    理论上只需要给浏览器提供组件 x/y 和宽高,布局上的其余属性都是可以自动计算的。

    CSS 都进化了那么多年,不能总是吃老本,不加新东西。现在加了约束,过几年大家就可以用上。

    网页的灵魂在于设计稿,是艺术层面的。可惜现在设计归设计,代码归代码。
    IvanLi127
        6
    IvanLi127  
       2021-05-25 20:53:25 +08:00 via Android
    我觉得问题出在 ui 上,web 的自适应挺好的。要套那么多层,就应该让 ui 返工优化下结构
    billlee
        7
    billlee  
       2021-05-25 21:51:08 +08:00
    不懂就问,width:calc(100% - 62px) 这个,不能写成在父元素上加 padding 吗?
    3dwelcome
        8
    3dwelcome  
    OP
       2021-05-25 23:33:40 +08:00
    @Mutoo 绝对定位挺尴尬的,你用主流的 Flex 布局,可以一层套一层。而绝对定位和 Flex 布局是相互对立的,有点脱离整体瀑布流的感觉。

    我理想中的前端好布局,是设计图转换后的 Flex+margin 偏移和对齐,看了代码后,也能猜个大概。比如很流行的 tailwind-css,就是以代码简洁著称。

    这点 Flex 布局可以做到,可一大堆 magic number 的绝对定位只看代码,基本没办法还原出结构。日后没有设计图,维护布局异常艰难。
    zbinlin
        9
    zbinlin  
       2021-05-28 11:48:15 +08:00
    你的设计稿的嵌套有多复杂,截个图看下
    3dwelcome
        10
    3dwelcome  
    OP
       2021-05-28 12:10:58 +08:00
    @zbinlin

    类似这种,Photoshop 里一些层级可能会异常多,在设计界俗称"千层饼"。

    如果按照这种图片,来手写 CSS Flex 布局,不算太复杂,但是就和标题说的一样,前端 UI 语法和设计稿脱离。完全是用 CSS 来重描一次界面了。

    zbinlin
        11
    zbinlin  
       2021-05-29 11:09:14 +08:00
    按这个设计稿,期望的 CSS 布局应该是怎样的,可以写下类似 CSS 的伪代码吗?
    3dwelcome
        12
    3dwelcome  
    OP
       2021-05-29 13:06:40 +08:00
    @zbinlin flex 通过 left-margin:auto 来控制右对齐之类的,手写 CSS 都是这个套路。

    根据设计稿,半自动化生产代码主旨是,要尽可能和人手写的差不多。

    你如果按照二楼生产绝对布局,那就脱离文档流了。父级 DIV 高度测量全部为 0,根本没办法实用。
    huacx
        13
    huacx  
       2021-08-12 23:45:09 +08:00
    个人感觉,安卓的原生页面布局 约束的设计是最简洁直观的,比 ios 好,css 这块应该说思路很不同,css 的思路大概类似报纸排版。个人感觉 css 这种属于历史遗产缝缝补补出来的东西,直接推倒重来的可以,而且 performance 可能更好。
    CoolSpring
        14
    CoolSpring  
       2021-09-05 20:12:11 +08:00
    前不久 Container Queries 进 chrome://flags 了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2642 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 15:21 · PVG 23:21 · LAX 08:21 · JFK 11:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.