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

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

  •  
  •   xhemj ·
    xhemj · 74 天前 via Android · 2520 次点击
    这是一个创建于 74 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言:

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

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

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

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

    望告知。

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

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

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

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

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

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

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

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


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

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