这是一个创建于 370 天前的主题，其中的信息可能已经有所发展或是发生改变。
简而言之我们组（新组建的）在做一个中台类的项目，大部分内容都是使用 Ant Deisgn 或者基于 Ant Deisgn 的二次开发都可以满足要求的那种；
然后我们组的主要出力的前端（包括我）都是第一次做大型前端项目，之前只做过练手小项目，再之前是 C#桌面开发。有组外的老同事搭了个基本框架，我们在框架上开发业务；
然后我们组的组长（负责业务）是非技术出身的，负则技术的副组长是后端，对前端开发基本不了解；
这个项目在开发的时候我们前端基本是按 1920×1080 的 devicePixelRatio 为 1 的屏幕开发的，UI 也是按这个分辨率出的图，在这个屏幕上实际跑起来页面也都没有啥问题。在这个前提下为了开发方便实际上 CSS 也都是写的 px 。
现在项目做的差不多了，验收的时候组里的领导突然要求我们要对项目要做好各种分辨率的适配。1080P 的屏幕显示效果要好，4K 屏幕的显示效果也要好，浏览器按住 Ctrl+鼠标滚轮放大缩小后的网页显示效果也要好，移动设备也要适配，显示效果也要好。（虽然他没说，但是看实际反馈来看，使用更低分辨率的比如 1366×768 的用户也是存在的，自然显示效果也要好）
所以想了解一下，实际的开发中中台类的前端项目需要什么程度的适配？这种程度的要求是算合理还是不合理？实际要着手去优化的话可以怎么做？
 |
1
kissmenow 2023-12-23 20:35:52 +08:00
这种适配不就是 px 转 rem 外加窗口宽度做兼容
|
 |
4
learnshare 2023-12-23 21:12:09 +08:00
|
 |
5
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 编辑。 |
|
6
rabbbit 2023-12-23 21:17:27 +08:00
当然偷懒的还是拿 rem 整体缩放省事，就看你们领导是否能接受那个效果了。
|
 |
7
xlcheer 2023-12-23 22:05:19 +08:00
rem 缩放明显不适合这种屏幕尺寸跨度这么大的项目，还是得使用 Row, Col 进行响应式适配，但是这个前提是设计稿也需要配合 antd 的 24 列网格系统。
|
|
8
xlcheer 2023-12-23 22:08:16 +08:00
没看清，原来 OP 的移动设备特指笔记本啊，那 rem 适配一定程度上能采用
|
 |
10
WangLiCha OP @xlcheer 设计稿适配 24 列系统那也是没有的，UI 和开发的开发的过程中都是没有太多考虑过屏幕适配问题的……
|
 |
11
yhxx 2023-12-23 22:32:29 +08:00
“1080P 的屏幕显示效果要好，4K 屏幕的显示效果也要好”
这个没啥问题 “浏览器按住 Ctrl+鼠标滚轮放大缩小后的网页显示效果也要好，移动设备也要适配，显示效果也要好。” 这个让他滚 |
|
12
WangLiCha OP @yhxx 补充一下，领导不喜欢页面上有空白，希望信息量满满的。所以我还是很头疼怎么同时让相同的内容在 1080P 和 4K 上都感觉信息量满满。等比缩放应该可以，但是实际效果可能还是挺弱智的……
|
 |
13
jones2000 2023-12-23 22:46:49 +08:00
招美工和产品设计， 把不同分辨率下，单独做 UI 设计。前端一个一个堆不就可以了。 领导哪个分辨率下不满意，就改哪个分辨率下的 UI ， 也就是体力活，多招几个前端或外包就能解决的事。不要想着一套界面适配所有分辨率。这样可以多拿预算。
|
|
14
yhxx 2023-12-23 22:55:32 +08:00
@WangLiCha 硬要搞也不是不能搞，各种尺寸媒体查询做吧
不过能提出这种需求说明老板是个 SB ，顺着他来会导致后面有无数的坑等着你填 |
 |
15
han3sui 2023-12-24 09:18:16 +08:00
移动端一般单独设计一搞，强行适配的话也是通过 grid ，但是效果一般，PC 端不同分辨率通过 grid 适配。
|
 |
16
zhwithsweet 2023-12-24 10:29:25 +08:00
领导是有点傻逼
|
 |
18
nzbin 2023-12-24 16:41:38 +08:00
核心就是做好响应式布局的适配，一般的中台也不需要太细致的断点，常用的电脑、平板、手机这几个断点就可以了，px 就足够，不用转 rem ，可以看看这个项目的适配，对于你说的几条都是满足的
https://ng-matero.github.io/ng-matero/ |
 |
19
leokun 2023-12-24 18:24:19 +08:00
如果只是做 pc 上不同设备的适配，用响应式断点就可以了啊，ant 上面的组件也基本都支持断点，还有专门用来做断点的组件
|
 |
20
unco020511 2023-12-25 10:22:31 +08:00
当然是用响应式的布局
|
 |
21
LavaC 2023-12-25 10:53:56 +08:00
就没几个网页能扛得住“Ctrl+鼠标滚轮放大缩小”还不影响布局的
|
 |
22
ceilingyear 2023-12-25 16:38:47 +08:00
@WangLiCha 那就要做移动端适配啊， 那工作量多了去了 ，用 css 的媒体查询做两套，一套移动端的一套 pc 的
|
 |
23
wednesdayco 2023-12-25 18:02:35 +08:00
rem 布局，老板 ctrl+缩放多少你就给他等比放大多少[笑]
|
 |
24
plu2 2023-12-27 17:19:13 +08:00
一般都需要提前沟通好，临时提这种需求，时间又紧，前端风险会很大，修改点多容易出现各种 bug
至于 4K 兼容主要可以从图片素材入口，提供 x2 图片，控制图片尺寸、背景 background-size 就好了 建议： 1 、直接提出不做修改 2 、提供更多开发时间，减少兼容性 3 、明确具体需求，取保后续迭代 4 、后台不建议兼容移动设备 |
Select Language