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

[xhemj]

前言：

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

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

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

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

望告知。

[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]

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