业务逻辑都是一样的，只有页面布局和样式不一样，这种要怎么处理？ 谢谢。
› Vue.js
This topic created in 2261 days ago, the information mentioned may be changed or developed.
Supplement 1 · Sep 1, 2020
业务逻辑的代码是一模一样的，只有布局和样式上的不同。
 |
tutuk5Sep 1, 2020
1
分 2 套模版，入口就当作 pc 端，判断一下设备类型，mobile 跳转另一套
|
 |
qq316107934Sep 1, 2020
2
做响应式就可以了，设置不同页面宽度下具体 grid 占用 col 的数量。
|
 |
loadingSep 1, 2020 via Android
3
要求低就弹性布局，要求高不用说啦。
|
 |
redbuckSep 1, 2020
4
让 UI 设计时注意按功能划分区块.
然后媒体查询实现一个布局组件,业务组件统统用布局组件包起来. 不过要注意交互逻辑是否一致. 比如桌面的分页加载,放到移动端一般是上拉加载,这两个加载逻辑不一致,在此基础上的增删改查处理方式也不一致. |
 |
lbwSep 1, 2020
5
css media query + flex box 或 grid box
|
 |
murmurSep 1, 2020
6
移动端和 pc 端布局可差远了
|
 |
7
响应式很难驾驭的，多半情况下设计出来是两个端都不太好用....
|
3 |
gloyeSep 1, 2020
8
vuetify 了解一下
|
 |
9
|
 |
ruoxieSep 1, 2020 via Android
10
逻辑复用可以考虑上 hooks
|
 |
zaulSep 1, 2020
11
2 套模板，PC 一套，mobile 一套，根据设备类型跳转
|
 |
xianqinSep 1, 2020
13
css 媒体查询走一波？
|
 |
yiyi11Sep 1, 2020 via Android
14
一套代码，只能移动端优先，然后把 pc 当成“大屏手机”。
|
 |
darknollSep 1, 2020
15
用 material 风格的组件库吧，移动端和 pc 都适配
|
 |
zhangyimingSep 2, 2020
16
做个入口组件？
export default { component: { PC: require.ensure('xx') // 懒加载 H5: require.ensure('xx') // 懒加载 }, render(h) { if(pc) return h('PC') else return h('H5') } } |
 |
KisekiRemiSep 2, 2020 via iPhone
17
媒体查询 @media
再加一个移动端查询 |
|
KisekiRemiSep 2, 2020 via iPhone
18
@KisekiRemi 最好用流行的 ui 库
|
 |
meteor957Sep 2, 2020
19
很简单的话就响应式，最好写两套代码
|
 |
ksiceSep 2, 2020
20
然后 pc 端还需要适用 ie 浏览器（狗头保命）
|
 |
TompesSep 2, 2020 via Android
21
media query
|
 |
zhennannNov 6, 2020
22
使用 CabloyJS 全栈框架
|
Select Language