V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xhemj
V2EX  ›  前端开发

前端做自适应,是否需要做成两套代码,手机端和电脑端分开维护?

  •  
  •   xhemj · 2022-07-14 10:43:40 +08:00 via Android · 4816 次点击
    这是一个创建于 849 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言:

    最近用 Vue 做一个前段的项目,因为主打的是手机端,所以花了 2 天把手机端全部做好了,但由于有需求适配电脑端,所以还是决定适配一下电脑。

    尝试用 CSS 的方式适配了很久发现实在是很难直接自适应(手机端有很多功能电脑端不需要,电脑端又有功能手机端没空间显示)。

    尝试过使用 v-if 判断后选择显示组件+CSS (不知道应不应该这样),单这样一来似乎比较难维护(感觉逻辑复杂)。

    所以上网看了一下解决办法,似乎很多网站都是将手机电脑分两套代码自适应,手机端用 m.xxxx.com ,电脑端直接 www.xxxx.com ,但这样子是否存在维护困难的问题?

    望告知。

    36 条回复    2022-07-14 20:59:28 +08:00
    westoy
        1
    westoy  
       2022-07-14 10:49:34 +08:00
    你发现的那个是中古的做法, 现在都是用 responsive 做成一套了........
    passon
        2
    passon  
       2022-07-14 10:51:30 +08:00
    最近刚好在做这种,用媒体查询做的响应式
    css 基本上要写 2 套
    weixiangzhe
        3
    weixiangzhe  
       2022-07-14 10:53:23 +08:00   ❤️ 3
    做一套?那考验的前端开发吗?那需要的是设计师有这个 responsive 的理念啊
    richangfan
        4
    richangfan  
       2022-07-14 10:54:55 +08:00   ❤️ 1
    bootstrap 就有响应式功能
    murmur
        5
    murmur  
       2022-07-14 10:55:54 +08:00   ❤️ 3
    responsive 对设计师和内容有非常高的要求,没有全面设计的 responsive 就是丑
    wyhooo
        6
    wyhooo  
       2022-07-14 10:56:03 +08:00
    做一套对 UI 要求太高,如果是简单的官网这种还可行,复杂页面还是得分开。
    kop1989smurf
        7
    kop1989smurf  
       2022-07-14 10:56:21 +08:00   ❤️ 2
    不管在哪切割,一定最终会切割成两套实现的。
    只是切割在前(域名分割)还是切割在后(媒体查询切割、逻辑切割等等)

    因为手机端和 pc 端不光是样式的不同,业务复杂度,数据的呈现方式,以及操作流程也都是不同的。
    如果某个 web 产品,他的手机端和 pc 端遵循同一套操作流程和功能,那绝对是不合格的。
    3dwelcome
        8
    3dwelcome  
       2022-07-14 10:56:24 +08:00
    代码量少怎么都可以。

    代码量大最好还是统一管理,免得改了这边代码,另一边同步分支代码又没改,就很烦。

    一般我个人会用条件编译来实现不同分支,写一套,webpack 打包后就变成两套了。
    murmur
        9
    murmur  
       2022-07-14 10:57:38 +08:00
    @westoy 响应式好看的网站全球都没几个,我说的是好看,你为了响应式阉割内容不算

    响应式的定式基本就是大块文字+图片+视频来回交替,侧栏和分栏越少越好

    提到这个那当然是苹果的网站

    稍微复杂点的都没法响应了
    wu00
        10
    wu00  
       2022-07-14 10:58:29 +08:00
    想要可维护可扩展必须拆两套,不然后面你只能跑路了;
    当然了,小项目一把梭,随便搞
    dtdths1
        11
    dtdths1  
       2022-07-14 10:58:58 +08:00
    理想很丰满,现实很骨感。除了纯展示的页面,有几个是用 responsive 写的,尤其是对交互要求比较高的,都是两套,最多就是把一些逻辑抽出来公用
    zcf0508
        12
    zcf0508  
       2022-07-14 10:59:54 +08:00
    我目前的方案是手机端优先,考虑界面在大屏上的适配
    ryougifujino
        13
    ryougifujino  
       2022-07-14 11:00:41 +08:00
    简单的网站可以做成一套,比如官网之类偏展示的。复杂的就不太可能了,操作模式都是不一样的。
    xhemj
        14
    xhemj  
    OP
       2022-07-14 11:04:42 +08:00 via Android
    @zcf0508
    对,这也是我现在的方案,但是总感觉两套维护不太方便。
    毕竟手机屏幕小,放到大屏很多地方都空出来了。
    RealJacob
        15
    RealJacob  
       2022-07-14 11:12:21 +08:00
    大部分情况就是理想很丰满,现实很骨感。两套东西迭代起来反而是问题最少的
    yaphets666
        16
    yaphets666  
       2022-07-14 11:13:30 +08:00
    @RealJacob 对的,懂这个说明踩过坑了
    estk
        17
    estk  
       2022-07-14 11:23:28 +08:00 via Android
    @weixiangzhe
    设计师给 3 份稿,对应 300 ,800 ,1200 宽度好像
    menglizhi2333
        18
    menglizhi2333  
       2022-07-14 11:26:36 +08:00
    得看你们产品需求,如果明确 PC 有大量专有功能,最好就是分开。
    只是单纯界面不同,得让设计师重新设计 UI 三套 UI ,参考:手机,平板,PC ,布局用 flex 尽量撑满宽度就好
    FFFFourwood
        19
    FFFFourwood  
       2022-07-14 11:48:22 +08:00
    设计师 给的 UI 可以的情况下
    一套代码 一套 css 是完全 ok 的
    flex + 媒体查询 + em/rem/vw/vh
    之前有做过 华为消费者 BG 的官网的一些产品
    都是,两个 UI 图,1920 一个,750 一个
    前端这做 320px < 分辨率 < 6k 的 mac 屏 全适配,,随意拖拽浏览器大小
    FFFFourwood
        20
    FFFFourwood  
       2022-07-14 11:49:07 +08:00
    可以去看一下 华为消费者 BG 还有 苹果 官网的 产品的 css
    hjxe0609
        21
    hjxe0609  
       2022-07-14 14:11:46 +08:00
    如果是做电商的,可以参考下 eileenfisher ,本人觉得这网站前端布局和 css 方面做得可以的
    PEAL
        22
    PEAL  
       2022-07-14 15:51:37 +08:00
    自适应的意思就是一套代码两端用
    a90120411
        23
    a90120411  
       2022-07-14 16:18:06 +08:00
    @PEAL 搞混了吧,自适应是多套设计,多套代码。响应式是一套代码。
    网站信息结构简单的可以用响应式,复杂的要想体验好,目前主流还是做自适应。
    suxiaoxiann
        24
    suxiaoxiann  
       2022-07-14 16:39:38 +08:00
    两套反而是最好的,响应式吹得多,但往往也就做做官网页面。
    BealuoC
        25
    BealuoC  
       2022-07-14 16:44:01 +08:00
    业务复杂的话做两套吧
    Mark24
        26
    Mark24  
       2022-07-14 16:45:21 +08:00
    如果手机、电脑永远是一个站点。那你就做成一个

    比如 Youtube 就是:Youtube 页面承载的内容比较一致。布局不会造成影响。


    如果手机、电脑是分开运营的,强调不同交互逻辑。想要单独优化,那就可以做成 2 个。

    参考 比如 B 站,淘宝。 他们元素花里胡哨,已经不足以强塞入一个站点了。也会造成维护困难。做成 2 个是合适的。
    dcsuibian
        27
    dcsuibian  
       2022-07-14 16:47:11 +08:00
    我也觉得响应式好,但这个难度很高。
    自己设计肯定搞不出来。
    sugars
        28
    sugars  
       2022-07-14 17:10:07 +08:00
    我用 nuxt.js + sass 做的响应式,电脑和手机端共用一套代码
    PEAL
        29
    PEAL  
       2022-07-14 17:15:15 +08:00
    @a90120411 噢噢真搞混了,我傻了哈哈哈哈
    Quarter
        30
    Quarter  
       2022-07-14 17:21:58 +08:00 via iPhone
    要看业务内容,有些不是响应式就可以解决的,显示模式、交互模式可能都直接发生了翻天覆地的变化,那不如就做两套,没必要非要把代码揉杂到一块,如果只是简单布局和一些比例的变化,那可以借助栅格化来做一些响应式布局
    bzw875
        31
    bzw875  
       2022-07-14 17:23:53 +08:00
    页面非常简单,布局简单,交互简单可以使用响应式。但是页面复杂建议写 2 套了,从业那么多年没见过一套前端代码兼容移动端和 PC 端的
    gaocc
        32
    gaocc  
       2022-07-14 17:32:30 +08:00
    还是看差异大小
    布局,内容,结构都不同,差异大,肯定维护两套。
    如果不是上述这样,看描述,好像 h5 是主打的入口,pc 只是辅助入口,简单能看,引流到移动端 h5 这样。
    那么可以 css 媒体查询,根据屏幕宽适配两套样式,有部分内容差异的,v-show 隐藏。
    这种做法在阿里的部分网站页面也有,上家公司 UI 直接拿这示例,要求开发做的,也算常规做法
    fiypig
        33
    fiypig  
       2022-07-14 17:34:32 +08:00
    肯定要两套方便修改维护 ,不然你做一套响应式真的只适合官网了
    daimubai
        34
    daimubai  
       2022-07-14 20:38:55 +08:00
    @BealuoC 那出个 bug 得在两套代码上都改了吧。还是只有页面是分开的,逻辑比如请求接口是分开的?
    daimubai
        35
    daimubai  
       2022-07-14 20:39:26 +08:00
    @BealuoC 打错了,那出个 bug 得在两套代码上都改了吧。还是只有页面是分开的,逻辑比如请求接口是公用的代码?
    akira
        36
    akira  
       2022-07-14 20:59:28 +08:00
    电脑端你们只是适配,不是主打的话 ,别浪费精力
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2543 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:19 · PVG 10:19 · LAX 18:19 · JFK 21:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.