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

[xhemj]

前言：

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

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

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

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

望告知。

[westoy]

你发现的那个是中古的做法, 现在都是用 responsive 做成一套了........

[passon]

最近刚好在做这种，用媒体查询做的响应式
css 基本上要写 2 套

[weixiangzhe]

做一套？那考验的前端开发吗？那需要的是设计师有这个 responsive 的理念啊

[richangfan]

bootstrap 就有响应式功能

[murmur]

responsive 对设计师和内容有非常高的要求，没有全面设计的 responsive 就是丑

[wyhooo]

做一套对 UI 要求太高，如果是简单的官网这种还可行，复杂页面还是得分开。

[kop1989smurf]

不管在哪切割，一定最终会切割成两套实现的。
只是切割在前（域名分割）还是切割在后（媒体查询切割、逻辑切割等等）

因为手机端和 pc 端不光是样式的不同，业务复杂度，数据的呈现方式，以及操作流程也都是不同的。
如果某个 web 产品，他的手机端和 pc 端遵循同一套操作流程和功能，那绝对是不合格的。

[3dwelcome]

代码量少怎么都可以。

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

一般我个人会用条件编译来实现不同分支，写一套，webpack 打包后就变成两套了。

[murmur]

@westoy 响应式好看的网站全球都没几个，我说的是好看，你为了响应式阉割内容不算

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

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

稍微复杂点的都没法响应了

[wu00]

想要可维护可扩展必须拆两套，不然后面你只能跑路了；
当然了，小项目一把梭，随便搞

[dtdths1]

理想很丰满，现实很骨感。除了纯展示的页面，有几个是用 responsive 写的，尤其是对交互要求比较高的，都是两套，最多就是把一些逻辑抽出来公用

[zcf0508]

我目前的方案是手机端优先，考虑界面在大屏上的适配

[ryougifujino]

简单的网站可以做成一套，比如官网之类偏展示的。复杂的就不太可能了，操作模式都是不一样的。

[xhemj]

@zcf0508
对，这也是我现在的方案，但是总感觉两套维护不太方便。
毕竟手机屏幕小，放到大屏很多地方都空出来了。

[RealJacob]

大部分情况就是理想很丰满，现实很骨感。两套东西迭代起来反而是问题最少的

[yaphets666]

@RealJacob 对的，懂这个说明踩过坑了

[estk]

@weixiangzhe
设计师给 3 份稿，对应 300 ，800 ，1200 宽度好像

[menglizhi2333]

得看你们产品需求，如果明确 PC 有大量专有功能，最好就是分开。
只是单纯界面不同，得让设计师重新设计 UI 三套 UI ，参考：手机，平板，PC ，布局用 flex 尽量撑满宽度就好

[FFFFourwood]

设计师 给的 UI 可以的情况下
一套代码 一套 css 是完全 ok 的
flex + 媒体查询 + em/rem/vw/vh
之前有做过 华为消费者 BG 的官网的一些产品
都是，两个 UI 图，1920 一个，750 一个
前端这做 320px < 分辨率 < 6k 的 mac 屏 全适配，，随意拖拽浏览器大小

[FFFFourwood]

可以去看一下 华为消费者 BG 还有 苹果 官网的 产品的 css

[hjxe0609]

如果是做电商的，可以参考下 eileenfisher ，本人觉得这网站前端布局和 css 方面做得可以的

[PEAL]

自适应的意思就是一套代码两端用

[a90120411]

@PEAL 搞混了吧，自适应是多套设计，多套代码。响应式是一套代码。
网站信息结构简单的可以用响应式，复杂的要想体验好，目前主流还是做自适应。

[suxiaoxiann]

两套反而是最好的，响应式吹得多，但往往也就做做官网页面。

[BealuoC]

业务复杂的话做两套吧

[Mark24]

如果手机、电脑永远是一个站点。那你就做成一个

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


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

参考 比如 B 站，淘宝。 他们元素花里胡哨，已经不足以强塞入一个站点了。也会造成维护困难。做成 2 个是合适的。

[dcsuibian]

我也觉得响应式好，但这个难度很高。
自己设计肯定搞不出来。

[sugars]

我用 nuxt.js + sass 做的响应式，电脑和手机端共用一套代码

[PEAL]

@a90120411 噢噢真搞混了，我傻了哈哈哈哈

[Quarter]

要看业务内容，有些不是响应式就可以解决的，显示模式、交互模式可能都直接发生了翻天覆地的变化，那不如就做两套，没必要非要把代码揉杂到一块，如果只是简单布局和一些比例的变化，那可以借助栅格化来做一些响应式布局

[bzw875]

页面非常简单，布局简单，交互简单可以使用响应式。但是页面复杂建议写 2 套了，从业那么多年没见过一套前端代码兼容移动端和 PC 端的

[gaocc]

还是看差异大小
布局，内容，结构都不同，差异大，肯定维护两套。
如果不是上述这样，看描述，好像 h5 是主打的入口，pc 只是辅助入口，简单能看，引流到移动端 h5 这样。
那么可以 css 媒体查询，根据屏幕宽适配两套样式，有部分内容差异的，v-show 隐藏。
这种做法在阿里的部分网站页面也有，上家公司 UI 直接拿这示例，要求开发做的，也算常规做法

[fiypig]

肯定要两套方便修改维护 ,不然你做一套响应式真的只适合官网了

[daimubai]

@BealuoC 那出个 bug 得在两套代码上都改了吧。还是只有页面是分开的，逻辑比如请求接口是分开的？

[daimubai]

@BealuoC 打错了，那出个 bug 得在两套代码上都改了吧。还是只有页面是分开的，逻辑比如请求接口是公用的代码？

[akira]

电脑端你们只是适配，不是主打的话 ，别浪费精力