vue2项目自适应分辨率

Vue.js是一个MVVM框架，它本身并没有提供自适应分辨率的解决方案，但可以通过CSS和JavaScript实现。

在CSS中，可以使用@media查询来根据屏幕尺寸应用不同的样式。例如：

@media (max-width: 768px) {
  /* 在小于等于768像素宽度的设备上应用这些样式 */
  body {
    font-size: 14px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 在769到1024像素宽度的设备上应用这些样式 */
  body {
    font-size: 16px;
  }
}

@media (min-width: 1025px) {
  /* 在大于等于1025像素宽度的设备上应用这些样式 */
  body {
    font-size: 18px;
  }
}

这里我们根据不同的屏幕宽度，设置了不同的body字体大小。

在JavaScript中，可以通过window.screen.width和window.screen.height获取屏幕尺寸，然后根据比例进行调整。例如：

const baseFontSize = 16; // 假设基准字体大小为16px

function setRem() {
  const scale = window.innerWidth / 375; // 假设设计稿宽度为375px
  document.documentElement.style.fontSize = baseFontSize * scale + 'px';
}

setRem();
window.addEventListener('resize', setRem);

这里我们将设计稿的宽度设为375px，然后根据屏幕宽度计算出一个比例，再将基准字体大小乘以比例得到实际字体大小。然后在页面加载和窗口大小改变时调用setRem函数即可。

需要注意的是，在使用自适应方案时，需要在设计阶段确定好基准尺寸和比例，以确保在不同屏幕下显示效果一致。