关于 Web 开发困惑，请教从移动开发转到 Web 开发的大佬

[zsk425]

本人对 Web 开发认知还停留在手敲 HTML+CSS+JS 的水平，不了解任何框架，有一些的移动开发经验。有以下困惑：

1. Web 开发是否有像移动开发一样，可以使用像 Android 的约束布局（对应 iOS 自动布局），个人觉得 CSS 布局太复杂
2. 是否有面向对象的组件，比如 scrollview 组件，调用自身封装的方法可以滑动到底部，而不是手写一大段 JS 代码

[across]

只接触了两年 web ，主要是平台涉及，没有透彻深入过。
1. Web 的布局属性，和移动端其实是一样的，但是表述方法有点区别···· 《 CSS 权威指南》里面，挑那个 边框/边距、弹性盒布局的相关的两三个章节看下就好。有理解起来会很快。
2. 搜组件库，比如 Ant Design ，不过这是基于 React 框架的···

[tool2dx]

我自己的前端开发迁移流程:

1. jquery+手写 css
2. flex css 布局
3. tailwind css
4. nextjs + v0.dev 复制别人布局
5. 把 web ui 层抽象出来，脱离浏览器运行

[LavaC]

1：css 了解完盒模型、flex 和 grid 布局基本够用了；
2：有这种组件，但具体哪个更适合你的需求还得去 npm 之类的地方找找。

[LuckyLauncher]

1. 建议直接 flex
2. 有这些封装好的组件，不过质量层次不齐

[iOCZS]

我觉得你都下海了，还问我能不能用腿跑，这个就不太合适了

[KgM4gLtF0shViDH3]

做前端不想学 css 那还是不用做了。

[rookie2luochao]

问题不大，用组件库做后台管理，小程序，h5 啥的，大部分写 css 场景很少，写的 css 也是简单点的，你可以看我这个项目 https://github.com/rookie-luochao/openapi-ui ，其实 css 并没有多少，如果你还用组件库的布局模型的话，那估计更少

[rookie2luochao]

因为我不喜欢写太多 css ，所以我都继续用的 cssinjs, 也没有用什么 taiwincss unocss 这些

[ltq918]

初入 Web ，个人觉得 Bootstrap v5 是一个很好的起点。不太用 CSS ，使用 row col 可以完成很多布局

[taotaodaddy]

tailwindcss

[thank4]

目前的 web 开发的话，像 vue 之类的话，如果你之前接触过 jectpackcompose 或者 SwiftUI 的话，大体比较相像。个人觉得前端甚至比原生移动端写 UI 更加方便，web 有很多的组件库。android 里面的很多控件基本上 Web 一些组件库像 ant 之类的都有类似的。
ConstraintLayout 之类的布局，我感觉前端好像没有，不过像线性布局我个人觉得可以对标 web 中 flex 布局。

[zsk425]

我的前端学习目标就是能开发 CMS 、简单的官网，可能也会有小程序，不会很深入，目前看来布局有可能不行，感谢大家热心回复

[DLOG]

写了 10 几年移动端和前端的老鸟，唯一的难点是：CSS
1 、移动端布局：我写完了，99%就是我想要的效果
2 、前端布局：我写完了，99%有问题
希望前端也能有约束布局。

[ebushicao]

如果你的环境不限制技术栈，那完全可以用 flutter 开发 web 。
如果你必须得用 web 相关技术栈，那就学习用某个 UI 组件库，通常一个 UI 组件库会封装自己的布局组件，某些组件也会有特定的方法，比如你说的 scrollview 组件可能会有封装的 scrollTo 方法（一般会是调用 DOM 的 scrollTo 方法

[lizy0329]

如果不用考虑兼容性，css 应该是布局系统里，最简单，也是最强大的存在了吧

[sankemao]

1. 如果只用到 css 控制大小布局，比 android 那套简单的多
2. 前端一般都有组件库，antd 等，按照文档使用就行

[blur1119]

第二点的话，组件倒是不知道，不过 js 原生和 React hook 都可以实现

[jones2000]

找不到合适的，自己撸一个不就行了。求别人不如自己搞。会 js 就行。 最后还不是编程成 js 执行。
如果不喜欢 css,直接所有的 DOM 都设置成“position: absolute”，　用 js 动态布局。

[Ghrhrrv146]

第二点，js 两行代码解决
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#examples

[tool2dx]

@jones2000 我也喜欢 absolute ，因为几乎所有的平台都支持绝对布局，移植 UI 体验实在是轻松加愉快。

你用一大堆约束布局，也就浏览器漂亮一点，还要看目标平台是不是支持。不支持还要改来改去的，麻烦。

[weixind]

css 只要会 flex 基本上就够用了。也写过一点 iOS 和 flutter ，web 的布局基本上是最简单和强大的了。。。

scrollview 这种东西社区里面成熟度很高的没有十个也有八个。

写前端不用三大框架就好比解剖牛不用刀，用手抠一样。

楼上推荐全用 position: absolute 就好比走路不用腿，用下巴。

君子生非异也，善假于物也。用 20% 的精力系统性学习点入门的内容足以解决 80% 的问题。

[8863824]

flex 布局还是比较好掌握的，跟着教程过半小时就能上手，难点就是在没设计师的情况下，要自己做出漂亮的页面太难了

[tool2dx]

@weixind "楼上推荐全用 position: absolute 就好比走路不用腿，用下巴。"

不能这样说，很多 figma 插件，导出来的默认就是绝对布局。又没让你手写。

flex 只适合手写布局，但我个人觉得，别的平台都自带 UI 图形设计器，唯独 web 没有。

你看哪一个行业设计师，用代码设计界面啊，也就前端专属了。

[zsk425]

@ebushicao Flutter 也会试试，跨平台吸引力很大

[retrocode]

单轮布局的话 css 应该是最强大的了

[linyongxin]

css+js 必须啃，不然还是好好做老本行吧

[checkcai]

我是一开始学的 Android ，后来转 Web ，一开始写布局很不适应，后来了解了 flex 布局，基本就没有什么问题了。
建议可以了解下 flex 布局，相信可以解决大部分问题。

[checkcai]

顺便说下，微信关于 flex 布局的教程写的挺好的，https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a

[mathfather001]

Is it harder to move, should it be easier to switch to the web?

[naminokoe]

HTML+CSS+JS 与框架的主要区别在于，当页面上有多个组件需要相互响应时，框架比 JS 简单。如果只是一个输入框+一个提交按钮，确实用不着框架

[liyafe1997]

终极 Web 开发：C++ for Qt on WebAssembly （逃

[ericguo]

如果你觉得 CSS 布局太复杂，手写大量 JS 代码太累（其实写 TS 更累），实事求是的说，你还是不要做 Web 开发了。（抱歉不友善，但是我也想不到更好的表达方式。）

[ericguo]

@zsk425 Flutter 就算了，Google 这两天都大裁员了，这年头连原生都在哪里卷交互，React Native 都半死不活的（ RN 用户基数还是要比 Flutter 高太多了）。真正的跨平台只有两种，C 和 Web 。

[dizeng1118]

android 的 constrain layout 和 iOS 的 autolayout 都是 Cassowary layout ，这个东西在 web 世界里不太流行，有人尝试过但放弃了。https://news.ycombinator.com/item?id=13125093 ，可能觉得还是太复杂。

现在即使在 mobile 上，新的 UI 框架如 SwiftUI ，JetPack Compose ，甚至之前的 flutter ，都没有采用 Cassowary layout ，而是用类似 HStack VStack 这种横着来一下，竖着来一下的组合 layout ，而 css flex layout 又恰到兼容了这一习惯。当 view 的数量和嵌套不再是性能瓶颈时，复杂的 Cassowary layout 用处就不是很大。