这是一个创建于 1614 天前的主题，其中的信息可能已经有所发展或是发生改变。
拿到设计同学的 UI 设计稿后，有个手机界面自适应的需求。
自适应这个在设计软件里超简单，有设定左右约束或者上下约束按钮，点两下就完事了。
可转换到 CSS 代码里，就变成了异常复杂的事情。先不说 div position/float 定位老布局有陈旧性，连新 flex 布局也不能很好适配复杂嵌套的设计稿。
于是，CSS 里能跟着父级 div 缩放或定位的控件，最终就全变成了 width:calc(100% - 62p)这种很奇怪的方式。
CSS 规范里，为什么不学设计软件，加个父级约束属性呢？加入上下左右约束关键字(constraint)，就自动能适配几乎 90%的设计稿件！
有人会说，可以用绝对定位啊。现在都 2021 年了，绝对定位早就不是网页设计的主流，不可能反其道而行之吧。况且所谓的 CSS 约束关键字，也仅仅在页面父级 div 大小改变时，才会生效。换句话说，平时约束属性是没任何存在感的，可以不用破坏原有的页面布局，能和 Flex/Grid 融合，简直完美。
 | 1 meteor957 2021-05-25 18:55:57 +08:00 via Android 确实，calc 很难摆脱，并且 calc 很难维护 |
 | 2 Mutoo 2021-05-25 19:32:00 +08:00 绝对定位虽然不是主流，但肯定是很重要的布局工具。而且绝对定位本身就是一种约束，非常适合这个应用场景，并不会因为今年是哪一年而被弃用。没必要反其道而行之。 |
 | 3 charlie21 2021-05-25 20:15:05 +08:00 约束的底层实现 ... 大概就是 width:calc(100% - 62px) 这种运算 |
 | 4 vance123 2021-05-25 20:34:51 +08:00 via Android  1 因为 css 是一帮学设计和排版的人搞的 |
 | 5 3dwelcome OP @charlie21 是的，但我就是觉得直接把底层运算公式暴露给 CSS 代码，让前端去维护，很不优雅。 理论上只需要给浏览器提供组件 x/y 和宽高，布局上的其余属性都是可以自动计算的。 CSS 都进化了那么多年，不能总是吃老本，不加新东西。现在加了约束，过几年大家就可以用上。 网页的灵魂在于设计稿，是艺术层面的。可惜现在设计归设计，代码归代码。 |
 | 6 IvanLi127 2021-05-25 20:53:25 +08:00 via Android 我觉得问题出在 ui 上，web 的自适应挺好的。要套那么多层，就应该让 ui 返工优化下结构 |
 | 7 strong>billlee 2021-05-25 21:51:08 +08:00 不懂就问，width:calc(100% - 62px) 这个，不能写成在父元素上加 padding 吗？ |
| 8 3dwelcome OP @Mutoo 绝对定位挺尴尬的，你用主流的 Flex 布局，可以一层套一层。而绝对定位和 Flex 布局是相互对立的，有点脱离整体瀑布流的感觉。 我理想中的前端好布局，是设计图转换后的 Flex+margin 偏移和对齐，看了代码后，也能猜个大概。比如很流行的 tailwind-css，就是以代码简洁著称。 这点 Flex 布局可以做到，可一大堆 magic number 的绝对定位只看代码，基本没办法还原出结构。日后没有设计图，维护布局异常艰难。 |
 | 9 zbinlin 2021-05-28 11:48:15 +08:00 你的设计稿的嵌套有多复杂，截个图看下 |
| 10 3dwelcome OP @zbinlin 类似这种，Photoshop 里一些层级可能会异常多，在设计界俗称"千层饼"。 如果按照这种图片，来手写 CSS Flex 布局，不算太复杂，但是就和标题说的一样，前端 UI 语法和设计稿脱离。完全是用 CSS 来重描一次界面了。  |
| 11 zbinlin 2021-05-29 11:09:14 +08:00 按这个设计稿，期望的 CSS 布局应该是怎样的，可以写下类似 CSS 的伪代码吗？ |
| 12 3dwelcome OP @zbinlin flex 通过 left-margin:auto 来控制右对齐之类的，手写 CSS 都是这个套路。 根据设计稿，半自动化生产代码主旨是，要尽可能和人手写的差不多。 你如果按照二楼生产绝对布局，那就脱离文档流了。父级 DIV 高度测量全部为 0，根本没办法实用。 |
 | 13 huacx 2021-08-12 23:45:09 +08:00 个人感觉，安卓的原生页面布局 约束的设计是最简洁直观的，比 ios 好，css 这块应该说思路很不同，css 的思路大概类似报纸排版。个人感觉 css 这种属于历史遗产缝缝补补出来的东西，直接推倒重来的可以，而且 performance 可能更好。 |
 | 14 CoolSpring 2021-09-05 20:12:11 +08:00 前不久 Container Queries 进 chrome://flags 了 |
Select Language