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

[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