vue pc端不同分辨率如何适配啊？

Question

vue pc端不同分辨率如何适配啊？ 项目已经开发完了 都是按照1920分辨率开发的 但是客户有的是1366分辨率 布局就乱了

Answer 1

直接用你当前UI库的栅格布局组件就行，比如说：

• EleUI 的 Layout 布局 | Element；
• AntD Vue 的 栅格 Grid - Ant Design Vue
• 如果说你是史前项目也可以使用 BootStrap 的 Grid system · Bootstrap。

一般来说简单的布局问题就已经解决了，图下如所示：

如果说你的首页是数据大屏的适配，那么一般在上面的基础上，额外使用媒体查询 @media 去做一些细节上的调优。

主要会面零的问题，就是一般的笔记本会有系统缩放，所以在可视窗口的高度上会有问题，很多的 1920x1080 的分辨率在 125%/150% 的缩放下可视窗口高度基本就在 800~900 徘徊了。所以主要担心的是PM要求 在一屏高度下展示大部分的内容 这个需求的适配。

---

就个人经验而言并不推荐 postcss-px2rem 或者 px2xxx 这种看起来可以一劳永逸的解决方案。

Answer 2

用css媒体查询，适配下1366分辨率

@media screen and (min-width:1366px) and (max-width:1920px){
  
}

Answer 3

1. 多用 flex 布局，别啥宽度都写死，只适配某个分辨率
2. 使用 CSS 的 @media screen 来针对不同分别率做多套样式。

其实第二点都不一定需要，只要你弹性布局写得好就能解决大部分问题。关于你说的布局错乱，大概率是写了不少固定的宽高。
另外在测试上，你还是得多在各种分别率上测一测。不同分别率很常见啊。比如大显示屏和笔记本就差别很大。

Answer 4

如果你的项目是用的webpack开发的可以试试lib-flexable插件，这个可以根据不同分辨率调整页面大小