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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1276 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

CSS

约束

父级

flex

14 条回复 • 2021-09-05 20:12:11 +08:00

meteor957

2021-05-25 18:55:57 +08:00 via Android

确实，calc 很难摆脱，并且 calc 很难维护

Mutoo

2021-05-25 19:32:00 +08:00

绝对定位虽然不是主流，但肯定是很重要的布局工具。而且绝对定位本身就是一种约束，非常适合这个应用场景，并不会因为今年是哪一年而被弃用。没必要反其道而行之。

charlie21

2021-05-25 20:15:05 +08:00

约束的底层实现 ... 大概就是 width:calc(100% - 62px) 这种运算

vance123

2021-05-25 20:34:51 +08:00 via Android

因为 css 是一帮学设计和排版的人搞的

3dwelcome

2021-05-25 20:42:13 +08:00

@charlie21 是的，但我就是觉得直接把底层运算公式暴露给 CSS 代码，让前端去维护，很不优雅。

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

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

网页的灵魂在于设计稿，是艺术层面的。可惜现在设计归设计，代码归代码。

IvanLi127

2021-05-25 20:53:25 +08:00 via Android

我觉得问题出在 ui 上，web 的自适应挺好的。要套那么多层，就应该让 ui 返工优化下结构

billlee

2021-05-25 21:51:08 +08:00

不懂就问，width:calc(100% - 62px) 这个，不能写成在父元素上加 padding 吗？

3dwelcome

2021-05-25 23:33:40 +08:00

@Mutoo 绝对定位挺尴尬的，你用主流的 Flex 布局，可以一层套一层。而绝对定位和 Flex 布局是相互对立的，有点脱离整体瀑布流的感觉。

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

这点 Flex 布局可以做到，可一大堆 magic number 的绝对定位只看代码，基本没办法还原出结构。日后没有设计图，维护布局异常艰难。