业务逻辑都是一样的,只有页面布局和样式不一样,这种要怎么处理? 谢谢。
1
tutuk5 2020-09-01 16:07:22 +08:00
分 2 套模版,入口就当作 pc 端,判断一下设备类型,mobile 跳转另一套
|
2
qq316107934 2020-09-01 16:08:48 +08:00
做响应式就可以了,设置不同页面宽度下具体 grid 占用 col 的数量。
|
3
loading 2020-09-01 16:09:01 +08:00 via Android
要求低就弹性布局,要求高不用说啦。
|
4
redbuck 2020-09-01 16:11:51 +08:00
让 UI 设计时注意按功能划分区块.
然后媒体查询实现一个布局组件,业务组件统统用布局组件包起来. 不过要注意交互逻辑是否一致. 比如桌面的分页加载,放到移动端一般是上拉加载,这两个加载逻辑不一致,在此基础上的增删改查处理方式也不一致. |
5
lbw 2020-09-01 16:11:55 +08:00
css media query + flex box 或 grid box
|
6
murmur 2020-09-01 16:15:51 +08:00
移动端和 pc 端布局可差远了
|
7
luckyrayyy 2020-09-01 16:18:39 +08:00 3
响应式很难驾驭的,多半情况下设计出来是两个端都不太好用....
|
8
gloye 2020-09-01 16:40:47 +08:00
vuetify 了解一下
|
9
waiaan OP |
10
ruoxie 2020-09-01 17:24:20 +08:00 via Android
逻辑复用可以考虑上 hooks
|
11
zaul 2020-09-01 17:33:22 +08:00
2 套模板,PC 一套,mobile 一套,根据设备类型跳转
|
13
xianqin 2020-09-01 18:08:50 +08:00
css 媒体查询走一波?
|
14
yiyi11 2020-09-01 18:16:35 +08:00 via Android
一套代码,只能移动端优先,然后把 pc 当成“大屏手机”。
|
15
darknoll 2020-09-01 18:22:31 +08:00
用 material 风格的组件库吧,移动端和 pc 都适配
|
16
sunzongzheng 2020-09-02 00:17:19 +08:00
做个入口组件?
export default { component: { PC: require.ensure('xx') // 懒加载 H5: require.ensure('xx') // 懒加载 }, render(h) { if(pc) return h('PC') else return h('H5') } } |
17
KisekiRemi 2020-09-02 02:51:10 +08:00 via iPhone
媒体查询 @media
再加一个移动端查询 |
18
KisekiRemi 2020-09-02 02:52:25 +08:00 via iPhone
@KisekiRemi 最好用流行的 ui 库
|
19
meteor957 2020-09-02 09:05:02 +08:00
很简单的话就响应式,最好写两套代码
|
20
ksice 2020-09-02 10:14:45 +08:00
然后 pc 端还需要适用 ie 浏览器(狗头保命)
|
21
Tompes 2020-09-02 21:58:30 +08:00 via Android
media query
|
22
zhennann 2020-11-06 09:13:12 +08:00
使用 CabloyJS 全栈框架
|