一般中台类的前端项目需要什么程度的适配？听到领导的需求有些茫然……

2023-12-23 20:10:56 +08:00
 WangLiCha

简而言之我们组（新组建的）在做一个中台类的项目，大部分内容都是使用 Ant Deisgn 或者基于 Ant Deisgn 的二次开发都可以满足要求的那种；

然后我们组的主要出力的前端（包括我）都是第一次做大型前端项目，之前只做过练手小项目，再之前是 C#桌面开发。有组外的老同事搭了个基本框架，我们在框架上开发业务；

然后我们组的组长（负责业务）是非技术出身的，负则技术的副组长是后端，对前端开发基本不了解；

这个项目在开发的时候我们前端基本是按 1920×1080 的 devicePixelRatio 为 1 的屏幕开发的，UI 也是按这个分辨率出的图，在这个屏幕上实际跑起来页面也都没有啥问题。在这个前提下为了开发方便实际上 CSS 也都是写的 px 。

现在项目做的差不多了，验收的时候组里的领导突然要求我们要对项目要做好各种分辨率的适配。1080P 的屏幕显示效果要好，4K 屏幕的显示效果也要好，浏览器按住 Ctrl+鼠标滚轮放大缩小后的网页显示效果也要好，移动设备也要适配，显示效果也要好。（虽然他没说，但是看实际反馈来看，使用更低分辨率的比如 1366×768 的用户也是存在的，自然显示效果也要好）

所以想了解一下，实际的开发中中台类的前端项目需要什么程度的适配？这种程度的要求是算合理还是不合理？实际要着手去优化的话可以怎么做？

5272 次点击
所在节点    程序员
24 条回复
kissmenow
2023-12-23 20:35:52 +08:00
这种适配不就是 px 转 rem 外加窗口宽度做兼容
WangLiCha
2023-12-23 20:46:06 +08:00
@kissmenow 这种情况把 px 都转成 rem 就能解决吗？那有什么可以自动转换的工具吗
rimworld
2023-12-23 20:48:02 +08:00
@WangLiCha postcss ，px2rem 搜索下吧。
learnshare
2023-12-23 21:12:09 +08:00
/t/835716
/t/785701
rabbbit
2023-12-23 21:15:41 +08:00
后台类前端一般都用 Ant Design 布局（ https://ant.design/components/layout-cn ）里的那几个 栅格、布局、弹性布局 搭配使用做适配，只有大屏这种才会用 rem 整体缩放。

具体的适配需要根据不同的分辨率做调整，例如 Ant Design （ https://ant.design/components/grid-cn ）这里的规范：
sm ≥ 576px
md ≥ 768px
xl ≥ 1200px

拿一行菜单做个例子，可能大于 1200px 一行显示 4 个， 小于 1200px 大于 768 一行显示 2 个，再往下一行 1 个。
移动端需要单独调整，例如自动隐藏左侧的菜单栏，以展示为主，某些不方便适配的操作直接提示使用 PC 编辑。
rabbbit
2023-12-23 21:17:27 +08:00
当然偷懒的还是拿 rem 整体缩放省事，就看你们领导是否能接受那个效果了。
xlcheer
2023-12-23 22:05:19 +08:00
rem 缩放明显不适合这种屏幕尺寸跨度这么大的项目，还是得使用 Row, Col 进行响应式适配，但是这个前提是设计稿也需要配合 antd 的 24 列网格系统。
xlcheer
2023-12-23 22:08:16 +08:00
没看清，原来 OP 的移动设备特指笔记本啊，那 rem 适配一定程度上能采用
WangLiCha
2023-12-23 22:25:29 +08:00
@xlcheer 不不，可能是有点歧义，我想表达的就是指手机……
WangLiCha
2023-12-23 22:31:36 +08:00
@xlcheer 设计稿适配 24 列系统那也是没有的，UI 和开发的开发的过程中都是没有太多考虑过屏幕适配问题的……
yhxx
2023-12-23 22:32:29 +08:00
“1080P 的屏幕显示效果要好，4K 屏幕的显示效果也要好”

这个没啥问题

“浏览器按住 Ctrl+鼠标滚轮放大缩小后的网页显示效果也要好，移动设备也要适配，显示效果也要好。”

这个让他滚
WangLiCha
2023-12-23 22:42:04 +08:00
@yhxx 补充一下，领导不喜欢页面上有空白，希望信息量满满的。所以我还是很头疼怎么同时让相同的内容在 1080P 和 4K 上都感觉信息量满满。等比缩放应该可以，但是实际效果可能还是挺弱智的……
jones2000
2023-12-23 22:46:49 +08:00
招美工和产品设计， 把不同分辨率下，单独做 UI 设计。前端一个一个堆不就可以了。　领导哪个分辨率下不满意，就改哪个分辨率下的 UI ， 也就是体力活，多招几个前端或外包就能解决的事。不要想着一套界面适配所有分辨率。这样可以多拿预算。
yhxx
2023-12-23 22:55:32 +08:00
@WangLiCha 硬要搞也不是不能搞，各种尺寸媒体查询做吧
不过能提出这种需求说明老板是个 SB ，顺着他来会导致后面有无数的坑等着你填
han3sui
2023-12-24 09:18:16 +08:00
移动端一般单独设计一搞，强行适配的话也是通过 grid ，但是效果一般，PC 端不同分辨率通过 grid 适配。
zhwithsweet
2023-12-24 10:29:25 +08:00
领导是有点傻逼
WangLiCha
2023-12-24 11:06:38 +08:00
@han3sui 这个 grid 指的是 antd 的 Grid 相关组件还是 CSS 的 grid ？
nzbin
2023-12-24 16:41:38 +08:00
核心就是做好响应式布局的适配，一般的中台也不需要太细致的断点，常用的电脑、平板、手机这几个断点就可以了，px 就足够，不用转 rem ，可以看看这个项目的适配，对于你说的几条都是满足的
https://ng-matero.github.io/ng-matero/
leokun
2023-12-24 18:24:19 +08:00
如果只是做 pc 上不同设备的适配，用响应式断点就可以了啊，ant 上面的组件也基本都支持断点，还有专门用来做断点的组件
unco020511
2023-12-25 10:22:31 +08:00
当然是用响应式的布局

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1002905

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX