• 请不要在回答技术问题时复制粘贴 AI 生成的内容
WangLiCha
V2EX  ›  程序员

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

  •  1
     
  •   WangLiCha · Dec 23, 2023 · 7557 views
    This topic created in 903 days ago, the information mentioned may be changed or developed.

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

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

    然后我们组的组长(负责业务)是非技术出身的,负则技术的副组长是后端,对前端开发基本不了解;

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

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

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

    24 replies    2023-12-27 17:19:13 +08:00
    kissmenow
        1
    kissmenow  
       Dec 23, 2023
    这种适配不就是 px 转 rem 外加窗口宽度做兼容
    WangLiCha
        2
    WangLiCha  
    OP
       Dec 23, 2023
    @kissmenow 这种情况把 px 都转成 rem 就能解决吗?那有什么可以自动转换的工具吗
    rimworld
        3
    rimworld  
       Dec 23, 2023
    @WangLiCha postcss ,px2rem 搜索下吧。
    learnshare
        4
    learnshare  
       Dec 23, 2023
    rabbbit
        5
    rabbbit  
       Dec 23, 2023
    后台类前端一般都用 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
        6
    rabbbit  
       Dec 23, 2023
    当然偷懒的还是拿 rem 整体缩放省事,就看你们领导是否能接受那个效果了。
    xlcheer
        7
    xlcheer  
       Dec 23, 2023
    rem 缩放明显不适合这种屏幕尺寸跨度这么大的项目,还是得使用 Row, Col 进行响应式适配,但是这个前提是设计稿也需要配合 antd 的 24 列网格系统。
    xlcheer
        8
    xlcheer  
       Dec 23, 2023
    没看清,原来 OP 的移动设备特指笔记本啊,那 rem 适配一定程度上能采用
    WangLiCha
        9
    WangLiCha  
    OP
       Dec 23, 2023
    @xlcheer 不不,可能是有点歧义,我想表达的就是指手机……
    WangLiCha
        10
    WangLiCha  
    OP
       Dec 23, 2023
    @xlcheer 设计稿适配 24 列系统那也是没有的,UI 和开发的开发的过程中都是没有太多考虑过屏幕适配问题的……
    yhxx
        11
    yhxx  
       Dec 23, 2023
    “1080P 的屏幕显示效果要好,4K 屏幕的显示效果也要好”

    这个没啥问题

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

    这个让他滚
    WangLiCha
        12
    WangLiCha  
    OP
       Dec 23, 2023
    @yhxx 补充一下,领导不喜欢页面上有空白,希望信息量满满的。所以我还是很头疼怎么同时让相同的内容在 1080P 和 4K 上都感觉信息量满满。等比缩放应该可以,但是实际效果可能还是挺弱智的……
    jones2000
        13
    jones2000  
       Dec 23, 2023
    招美工和产品设计, 把不同分辨率下,单独做 UI 设计。前端一个一个堆不就可以了。 领导哪个分辨率下不满意,就改哪个分辨率下的 UI , 也就是体力活,多招几个前端或外包就能解决的事。不要想着一套界面适配所有分辨率。这样可以多拿预算。
    yhxx
        14
    yhxx  
       Dec 23, 2023
    @WangLiCha 硬要搞也不是不能搞,各种尺寸媒体查询做吧
    不过能提出这种需求说明老板是个 SB ,顺着他来会导致后面有无数的坑等着你填
    han3sui
        15
    han3sui  
       Dec 24, 2023
    移动端一般单独设计一搞,强行适配的话也是通过 grid ,但是效果一般,PC 端不同分辨率通过 grid 适配。
    zhwithsweet
        16
    zhwithsweet  
       Dec 24, 2023
    领导是有点傻逼
    WangLiCha
        17
    WangLiCha  
    OP
       Dec 24, 2023
    @han3sui 这个 grid 指的是 antd 的 Grid 相关组件还是 CSS 的 grid ?
    nzbin
        18
    nzbin  
       Dec 24, 2023
    核心就是做好响应式布局的适配,一般的中台也不需要太细致的断点,常用的电脑、平板、手机这几个断点就可以了,px 就足够,不用转 rem ,可以看看这个项目的适配,对于你说的几条都是满足的
    https://ng-matero.github.io/ng-matero/
    leokun
        19
    leokun  
       Dec 24, 2023
    如果只是做 pc 上不同设备的适配,用响应式断点就可以了啊,ant 上面的组件也基本都支持断点,还有专门用来做断点的组件
    unco020511
        20
    unco020511  
       Dec 25, 2023
    当然是用响应式的布局
    LavaC
        21
    LavaC  
       Dec 25, 2023
    就没几个网页能扛得住“Ctrl+鼠标滚轮放大缩小”还不影响布局的
    ceilingyear
        22
    ceilingyear  
       Dec 25, 2023
    @WangLiCha 那就要做移动端适配啊, 那工作量多了去了 ,用 css 的媒体查询做两套,一套移动端的一套 pc 的
    wednesdayco
        23
    wednesdayco  
       Dec 25, 2023
    rem 布局,老板 ctrl+缩放多少你就给他等比放大多少[笑]
    plu2
        24
    plu2  
       Dec 27, 2023
    一般都需要提前沟通好,临时提这种需求,时间又紧,前端风险会很大,修改点多容易出现各种 bug
    至于 4K 兼容主要可以从图片素材入口,提供 x2 图片,控制图片尺寸、背景 background-size 就好了
    建议:
    1 、直接提出不做修改
    2 、提供更多开发时间,减少兼容性
    3 、明确具体需求,取保后续迭代
    4 、后台不建议兼容移动设备
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1077 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 70ms · UTC 23:13 · PVG 07:13 · LAX 16:13 · JFK 19:13
    ♥ Do have faith in what you're doing.