用 vue 开发一个项目，需要同时适应 pc 和移动端。

• 資深大佬 : tutuk5

  分 2 套模版，入口就当作 pc 端，判断一下设备类型，mobile 跳转另一套

• 資深大佬 : qq316107934

  做响应式就可以了，设置不同页面宽度下具体 grid 占用 col 的数量。

• 資深大佬 : loading

  要求低就弹性布局，要求高不用说啦。

• 資深大佬 : redbuck

  让 UI 设计时注意按功能划分区块.

  然后媒体查询实现一个布局组件,业务组件统统用布局组件包起来.

  不过要注意交互逻辑是否一致.
  比如桌面的分页加载,放到移动端一般是上拉加载,这两个加载逻辑不一致,在此基础上的增删改查处理方式也不一致.

• 資深大佬 : lbw

  css media query + flex box 或 grid box

• 資深大佬 : murmur

  移动端和 pc 端布局可差远了

• 資深大佬 : luckyrayyy

  响应式很难驾驭的，多半情况下设计出来是两个端都不太好用….

• 資深大佬 : gloye

  vuetify 了解一下

• 主 資深大佬 : waiaan

  @tutuk5 业务逻辑这一块怎么处理？两套都是一样的业务代码。

  @redbuck 业务逻辑的代码一模一样，只有布局上的不同，比如移动端表格可能只展示某几列，不用全部展示。

• 資深大佬 : ruoxie

  逻辑复用可以考虑上 hooks

• 資深大佬 : zaul

  2 套模板，PC 一套，mobile 一套，根据设备类型跳转

• 資深大佬 : miv

  @waiaan 计算属性或者 vif 判断

• 資深大佬 : xianqin

  css 媒体查询走一波？

• 資深大佬 : yiyi11

  一套代码，只能移动端优先，然后把 pc 当成“大屏手机”。

• 資深大佬 : darknoll

  用 material 风格的组件库吧，移动端和 pc 都适配

• 資深大佬 : sunzongzheng

  做个入口组件？

  export default {
  component: {
  PC: require.ensure(‘xx’) // 懒加载
  H5: require.ensure(‘xx’) // 懒加载
  },
  render(h) {
  if(pc) return h(‘PC’)
  else return h(‘H5’)
  }
  }

• 資深大佬 : KisekiRemi

  媒体查询 @media
  再加一个移动端查询

• 資深大佬 : KisekiRemi

  @KisekiRemi 最好用流行的 ui 库

• 資深大佬 : meteor957

  很简单的话就响应式，最好写两套代码

• 資深大佬 : ksice

  然后 pc 端还需要适用 ie 浏览器（狗头保命）

• 資深大佬 : Tompes

  media query