前端做自适应，是否需要做成两套代码，手机端和电脑端分开维护？
xhemj · 2022-07-14 10:43:40 +08:00 via Android · 4826 次点击这是一个创建于 852 天前的主题，其中的信息可能已经有所发展或是发生改变。
前言：
最近用 Vue 做一个前段的项目，因为主打的是手机端，所以花了 2 天把手机端全部做好了，但由于有需求适配电脑端，所以还是决定适配一下电脑。
尝试用 CSS 的方式适配了很久发现实在是很难直接自适应（手机端有很多功能电脑端不需要，电脑端又有功能手机端没空间显示）。
尝试过使用 v-if 判断后选择显示组件+CSS （不知道应不应该这样），单这样一来似乎比较难维护（感觉逻辑复杂）。
所以上网看了一下解决办法，似乎很多网站都是将手机电脑分两套代码自适应，手机端用 m.xxxx.com ，电脑端直接 www.xxxx.com ，但这样子是否存在维护困难的问题？
望告知。
 |
1
westoy 2022-07-14 10:49:34 +08:00
你发现的那个是中古的做法, 现在都是用 responsive 做成一套了........
|
 |
2
passon 2022-07-14 10:51:30 +08:00
最近刚好在做这种，用媒体查询做的响应式
css 基本上要写 2 套 |
 |
3
weixiangzhe 2022-07-14 10:53:23 +08:00  3
做一套？那考验的前端开发吗？那需要的是设计师有这个 responsive 的理念啊
|
 |
4
richangfan 2022-07-14 10:54:55 +08:00 1
bootstrap 就有响应式功能
|
 |
5
murmur 2022-07-14 10:55:54 +08:00 3
responsive 对设计师和内容有非常高的要求，没有全面设计的 responsive 就是丑
|
 |
6
wyhooo 2022-07-14 10:56:03 +08:00
做一套对 UI 要求太高，如果是简单的官网这种还可行，复杂页面还是得分开。
|
 |
7
kop1989smurf 2022-07-14 10:56:21 +08:00 2
不管在哪切割，一定最终会切割成两套实现的。
只是切割在前（域名分割）还是切割在后（媒体查询切割、逻辑切割等等） 因为手机端和 pc 端不光是样式的不同，业务复杂度，数据的呈现方式，以及操作流程也都是不同的。 如果某个 web 产品，他的手机端和 pc 端遵循同一套操作流程和功能，那绝对是不合格的。 |
 |
8
3dwelcome 2022-07-14 10:56:24 +08:00
代码量少怎么都可以。
代码量大最好还是统一管理，免得改了这边代码，另一边同步分支代码又没改，就很烦。 一般我个人会用条件编译来实现不同分支，写一套，webpack 打包后就变成两套了。 |
|
9
murmur 2022-07-14 10:57:38 +08:00
@westoy 响应式好看的网站全球都没几个，我说的是好看，你为了响应式阉割内容不算
响应式的定式基本就是大块文字+图片+视频来回交替，侧栏和分栏越少越好 提到这个那当然是苹果的网站 稍微复杂点的都没法响应了 |
 |
10
wu00 2022-07-14 10:58:29 +08:00
想要可维护可扩展必须拆两套，不然后面你只能跑路了；
当然了，小项目一把梭，随便搞 |
 |
11
dtdths1 2022-07-14 10:58:58 +08:00
理想很丰满，现实很骨感。除了纯展示的页面，有几个是用 responsive 写的，尤其是对交互要求比较高的，都是两套，最多就是把一些逻辑抽出来公用
|
 |
12
zcf0508 2022-07-14 10:59:54 +08:00
我目前的方案是手机端优先，考虑界面在大屏上的适配
|
 |
13
ryougifujino 2022-07-14 11:00:41 +08:00
简单的网站可以做成一套，比如官网之类偏展示的。复杂的就不太可能了，操作模式都是不一样的。
|
 |
14
xhemj OP |
 |
15
RealJacob 2022-07-14 11:12:21 +08:00
大部分情况就是理想很丰满，现实很骨感。两套东西迭代起来反而是问题最少的
|
 |
16
yaphets666 2022-07-14 11:13:30 +08:00
@RealJacob 对的，懂这个说明踩过坑了
|
 |
17
estk 2022-07-14 11:23:28 +08:00 via Android
@weixiangzhe
设计师给 3 份稿，对应 300 ，800 ，1200 宽度好像 |
 |
18
menglizhi2333 2022-07-14 11:26:36 +08:00
得看你们产品需求，如果明确 PC 有大量专有功能，最好就是分开。
只是单纯界面不同，得让设计师重新设计 UI 三套 UI ，参考：手机，平板，PC ，布局用 flex 尽量撑满宽度就好 |
 |
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 屏 全适配，，随意拖拽浏览器大小 |
|
20
FFFFourwood 2022-07-14 11:49:07 +08:00
可以去看一下 华为消费者 BG 还有 苹果 官网的 产品的 css
|
 |
21
hjxe0609 2022-07-14 14:11:46 +08:00
如果是做电商的，可以参考下 eileenfisher ，本人觉得这网站前端布局和 css 方面做得可以的
|
 |
22
PEAL 2022-07-14 15:51:37 +08:00
自适应的意思就是一套代码两端用
|
 |
23
a90120411 2022-07-14 16:18:06 +08:00
@PEAL 搞混了吧，自适应是多套设计，多套代码。响应式是一套代码。
网站信息结构简单的可以用响应式，复杂的要想体验好，目前主流还是做自适应。 |
 |
24
suxiaoxiann 2022-07-14 16:39:38 +08:00
两套反而是最好的，响应式吹得多，但往往也就做做官网页面。
|
 |
25
BealuoC 2022-07-14 16:44:01 +08:00
业务复杂的话做两套吧
|
 |
26
Mark24 2022-07-14 16:45:21 +08:00
如果手机、电脑永远是一个站点。那你就做成一个
比如 Youtube 就是：Youtube 页面承载的内容比较一致。布局不会造成影响。 如果手机、电脑是分开运营的，强调不同交互逻辑。想要单独优化，那就可以做成 2 个。 参考 比如 B 站，淘宝。 他们元素花里胡哨，已经不足以强塞入一个站点了。也会造成维护困难。做成 2 个是合适的。 |
 |
27
dcsuibian 2022-07-14 16:47:11 +08:00
我也觉得响应式好，但这个难度很高。
自己设计肯定搞不出来。 |
 |
28
sugars 2022-07-14 17:10:07 +08:00
我用 nuxt.js + sass 做的响应式，电脑和手机端共用一套代码
|
 |
30
Quarter 2022-07-14 17:21:58 +08:00 via iPhone
要看业务内容，有些不是响应式就可以解决的，显示模式、交互模式可能都直接发生了翻天覆地的变化，那不如就做两套，没必要非要把代码揉杂到一块，如果只是简单布局和一些比例的变化，那可以借助栅格化来做一些响应式布局
|
 |
31
bzw875 2022-07-14 17:23:53 +08:00
页面非常简单，布局简单，交互简单可以使用响应式。但是页面复杂建议写 2 套了，从业那么多年没见过一套前端代码兼容移动端和 PC 端的
|
 |
32
gaocc 2022-07-14 17:32:30 +08:00
还是看差异大小
布局，内容，结构都不同，差异大，肯定维护两套。 如果不是上述这样，看描述，好像 h5 是主打的入口，pc 只是辅助入口，简单能看，引流到移动端 h5 这样。 那么可以 css 媒体查询，根据屏幕宽适配两套样式，有部分内容差异的，v-show 隐藏。 这种做法在阿里的部分网站页面也有，上家公司 UI 直接拿这示例，要求开发做的，也算常规做法 |
 |
33
fiypig 2022-07-14 17:34:32 +08:00
肯定要两套方便修改维护 ,不然你做一套响应式真的只适合官网了
|
 |
36
akira 2022-07-14 20:59:28 +08:00
电脑端你们只是适配，不是主打的话 ，别浪费精力
|
Select Language