vue项目如何同时适配pc和移动端？

Question

要写一个官网，如果用element-ui来写pc端的话，比较方便适配移动端吗？或者有其他框架同时支持两个端吗？

Answer 1

设计最好就要有分块的概念.
如果不想写两套,这是前提.

然后设置几个断点,移动端就流式布局,一溜下来,桌面就能铺的下就铺.

如果想做的更精细,就要监听resize事件,可用在App.vue里全局监听.然后提交vuex,或者provide的方式共享给所有组件.组件内部再根据尺寸做一些更精细的操作.

---

分页表格和上拉加载列表页就不要想响应式了,老老实实写两套.加载逻辑都是不同的.

Answer 2

就拿老掉牙的bootstrap都可以实现多端适配。

Answer 3

最好的方案是写两套，移动端组件不怎么建议element.

if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
   // 移动端逻辑
}else{
  // PC端逻辑
}

Answer 4

mint-ui，是element的移动版

Answer 5

同时适配移动端和pc端，类似的页面我们可以去看github是怎么实现的，一般来说如果设计上是一个流式页面，比较容易达到同时兼容，不过还是要写一定 media query

Answer 6

依据你官网的内容同而定,如果内容偏重展示(一般官网偏重展示),可以做成响应式布局,如果业务逻辑比较多,ui控件较多则不适用. 随便举个例子,比如日期控件,选择控件,分页控件,这些pc上和移动页面上差别就很大了,如果强行用同一种,用户体验就不太好.

Answer 7

由于PC端和Mobile端的界面交互体验不同，页面的布局也必然不同。因此，仅仅依靠css媒体查询，只是让PC端的页面在Mobile端可用，但远远达不到原生Mobile端的效果。CabloyJS提供了独树一帜的pc=mobile+pad跨端自适应布局，只需要一套代码，同时兼容PC端和Mobile端，并且Mobile端达到原生交互体验。可以看一下这个视频演示：独树一帜的跨端方案：pc=mobile+pad自适应布局