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

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

  •  
  •   3dwelcome · 123 天前 · 1243 次点击
    这是一个创建于 123 天前的主题,其中的信息可能已经有所发展或是发生改变。

    拿到设计同学的 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   123 天前 via Android
    确实,calc 很难摆脱,并且 calc 很难维护
    Mutoo
        2
    Mutoo   123 天前
    绝对定位虽然不是主流,但肯定是很重要的布局工具。而且绝对定位本身就是一种约束,非常适合这个应用场景,并不会因为今年是哪一年而被弃用。没必要反其道而行之。
    charlie21
        3
    charlie21   123 天前
    约束的底层实现 ... 大概就是 width:calc(100% - 62px) 这种运算
    vance123
        4
    vance123   123 天前 via Android   ❤️ 1
    因为 css 是一帮学设计和排版的人搞的
    3dwelcome
        5
    3dwelcome   123 天前
    @charlie21 是的,但我就是觉得直接把底层运算公式暴露给 CSS 代码,让前端去维护,很不优雅。

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

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

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

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

    这点 Flex 布局可以做到,可一大堆 magic number 的绝对定位只看代码,基本没办法还原出结构。日后没有设计图,维护布局异常艰难。
    zbinlin
        9
    zbinlin   120 天前
    你的设计稿的嵌套有多复杂,截个图看下
    3dwelcome
        10
    3dwelcome   120 天前
    @zbinlin

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

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

    zbinlin
        11
    zbinlin   120 天前
    按这个设计稿,期望的 CSS 布局应该是怎样的,可以写下类似 CSS 的伪代码吗?
    3dwelcome
        12
    3dwelcome   119 天前
    @zbinlin flex 通过 left-margin:auto 来控制右对齐之类的,手写 CSS 都是这个套路。

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

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