前言:
最近用 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
电脑端你们只是适配,不是主打的话 ,别浪费精力
|