vue项目做屏幕自适应处理方式

针对"vue项目做屏幕自适应处理方式"，我们可以采用以下三步来实现：

1. 使用rem作为单位

rem是相对于根元素（html标签）的字体大小而言的。因此，我们可以通过设置根元素的字体大小，来达到屏幕自适应的目的。具体而言，我们可以根据设备屏幕尺寸来动态设置根元素的字体大小，例如我们可以在index.html的head中加入以下代码：

<script>
  const setRemUnit = () => {
    const px = 750 / 10;
    const width = document.documentElement.clientWidth;
    const rem = width / px;
    document.documentElement.style.fontSize = `${rem}px`;
  }
  setRemUnit();
  window.onresize = setRemUnit;
</script>

上述代码中，我们设置了一个初始的html字体大小为75px，并且每当窗口大小改变时，都会根据当前窗口的大小重新计算字体大小，以保证自适应性。

之后，我们在代码中可以使用rem作为单位来设置元素的大小：

.demo {
  font-size: 1.2rem;
  width: 6rem;
}

2. 使用@media媒体查询

在某些情况下，仅仅使用rem作为单位可能并不足够，因为有时我们需要依据屏幕尺寸进行一些不同的设置。这时候，我们可以使用@media媒体查询。

例如，我们可以在base.css中设置以下媒体查询：

@media screen and (min-width: 480px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

上述代码中，我们设置了两个媒体查询：当屏幕宽度大于等于480px时，html字体大小为14px；当屏幕宽度大于等于768px时，html字体大小为16px。这样，我们可以依据不同的屏幕尺寸，灵活地设置不同的样式。

示例

以下是一个简单的示例，展示了如何利用rem单位进行屏幕自适应和灵活设置样式：

<template>
  <div class="demo">
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</template>

<style>
.demo {
  font-size: 16px;
}
.header {
  height: 2rem;
  font-size: 1.4rem;
  background-color: blue;
  color: white;
  text-align: center;
}
.content {
  font-size: 1.2rem;
  line-height: 1.6rem;
  padding: 1rem;
}
.footer {
  height: 2rem;
  font-size: 1rem;
  background-color: gray;
  color: white;
  text-align: center;
}
@media screen and (min-width: 480px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
  .header {
    height: 3rem;
    font-size: 1.6rem;
  }
  .content {
    font-size: 1.4rem;
    line-height: 2rem;
    padding: 2rem;
  }
  .footer {
    height: 3rem;
    font-size: 1.2rem;
  }
}
</style>

上述代码中，我们设置了一个带有头部、内容和底部的简单页面，并使用了rem作为单位进行屏幕自适应。同时，在@media媒体查询中，我们为不同的屏幕宽度设置了不同的字体大小、高度等样式，以达到更好的页面效果。

除了这个示例外，我们还可以在单独的组件中使用rem进行自适应，例如，在Canvas.vue组件中，我们可以根据屏幕大小动态设置canvas元素的宽度和高度，以保证在不同设备上的显示效果，并且还可以在created钩子中动态计算出rem的比例，方便使用。