pc端vue项目自适应电脑屏幕

要使 PC 端 Vue 项目自适应电脑屏幕，可以使用 CSS 中的媒体查询（Media Query）来实现。具体步骤如下：

1. 在 Vue 项目的入口文件（比如 main.js）中引入全局 CSS 文件。

import './assets/css/global.css'

2. 在 global.css 文件中添加媒体查询样式。

@media screen and (max-width: 1200px) {
  /* 在屏幕宽度小于等于 1200px 时的样式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1600px) {
  /* 在屏幕宽度在 1201px 到 1600px 之间时的样式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1601px) {
  /* 在屏幕宽度大于等于 1601px 时的样式 */
  body {
    font-size: 18px;
  }
}

在上面的代码中，我们使用了三个媒体查询，分别对应着屏幕宽度在不同范围内时的样式。你可以根据实际情况修改这些样式。

3. 在 Vue 组件中使用 rem 作为单位。

在 Vue 组件中，我们可以使用 rem 作为单位，这样可以让页面元素随着屏幕大小的变化而自适应。在 global.css 文件中，我们可以设置根元素的字体大小为 16px，然后在组件中使用 rem 作为单位。

/* global.css */
html {
  font-size: 16px;
}

/* 组件样式 */
.my-component {
  font-size: 1rem; /* 相当于 16px */
  padding: 0.5rem; /* 相当于 8px */
}

这样，当屏幕宽度发生变化时，根元素的字体大小也会发生变化，进而影响到组件中使用 rem 作为单位的元素的大小。