vue项目适配不同分辨率屏幕

Question

vue项目首页适配不同分辨率屏幕 （主要是1920 * 1080 / 1536 * 864 / 1280 * 720）
项目描述：
首页背景图铺满整个屏幕（有10个坑位的背景图），然后定位10张具体产品图片到10个坑位上，
实现效果：
在不同分辨率屏幕上能够正常显示，没有横向纵向滚动条

目前实现方案：
首页路由中的元素设置背景图（宽度自适应，高度通过js获取屏幕高度进行设置为具体高度），然后把10个图片通过百分比定位到背景图中的坑位上，但是在1536 和1280的屏幕上会出现背景图的坑位与10张图片错位的情况，没办法，通过$refs去更改其他2种屏幕尺寸下的top/left值，而且，有些电脑显示设备推荐125%分辨率，处理起来有点麻烦，大家有更合适的方案吗？

Answer 1

针对你的需求，可以考虑使用CSS Grid或Flexbox来实现自适应布局。以下是一个可能的实现方案：

1.在你的首页中，使用CSS Grid或Flexbox来实现自适应布局。比如，在CSS Grid中，可以这样设置样式：

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列，每列宽度相同 */
  grid-template-rows: repeat(2, 1fr); /* 2行，每行高度相同 */
  grid-gap: 10px; /* 间隔10px */
}

.box {
  grid-column: span 1; /* 每个块占用1列 */
  grid-row: span 1; /* 每个块占用1行 */
}

2.将背景图片作为一个容器，在其中放置10个图片块，设置宽度为100%，高度为100vh（视口高度），以铺满整个屏幕。

3.在每个图片块中放置对应的产品图片，并通过CSS设置它们在容器中的位置。可以使用百分比、grid或flex布局等方式来实现。

4.在需要响应不同分辨率的情况下，可以使用CSS媒体查询来设置不同的样式。比如：

@media screen and (max-width: 1536px) {
  /* 在分辨率小于等于1536px的屏幕下生效 */
  .box {
    /* 根据实际情况调整top/left值 */
    top: 10px;
    left: 20px;
  }
}

综上所述，使用CSS Grid或Flexbox来实现自适应布局可以更方便地适应不同分辨率的屏幕。