PC 端适配移动端

/* 设置根元素字体大小 */
:root {
  font-size: 16px;
}

/* 根据屏幕宽度动态调整根元素字体大小 */
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    font-size: 12px;
  }
}

在这个样例中，我们设置了根元素字体大小为 16px，然后使用媒体查询来检测屏幕宽度，并根据需要动态修改根元素字体大小。例如，当屏幕宽度小于 768px 时，将根元素字体大小设置为 14px，当屏幕宽度小于 480px 时，将根元素字体大小设置为 12px。

接下来，您可以使用 rem 单位来定义其他元素的尺寸。例如，如果您希望某个元素的宽度为屏幕宽度的一半，可以这样定义：

.my-element {
  width: 50%;
  /* 使用 rem 单位定义其他属性 */
  font-size: 1.2rem;
  padding: 1rem;
  margin: 0 auto;
}

请注意，在使用 rem 单位时，其值是相对于根元素字体大小计算的，因此会根据根元素字体大小的变化而变化。

希望这可以帮助您进行 PC 端适配移动端。

在vue项目中适配

1. 首先安装 postcss-pxtorem 和 lib-flexible：

npm install postcss-pxtorem lib-flexible --save-dev

2. 在 package.json 中配置 postcss：

"postcss": {
  "plugins": {
    "postcss-pxtorem": {
      "rootValue": 16,
      "propList": ["*"]
    }
  }
}

这里的 rootValue 是根元素字体大小，我们将其设置为 16，也就是 1rem 等于 16px。

propList 是指哪些 CSS 属性会被转换为 rem 单位。这里我们将其设置为 ["*"]，表示所有属性都会被转换。

3.在 main.js 中引入 lib-flexible：

import 'lib-flexible/flexible.js';

4.在需要使用 rem 单位的组件中使用 px 单位，并添加一个类名 .no-rem，以避免被转换为 rem 单位。例如：

<template>
  <div class="my-element no-rem" :style="{ width: width + 'px' }">
    <!-- 使用 px 单位定义其他属性 -->
    <p :style="{ fontSize: fontSize + 'px' }">Hello, World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 200,
      fontSize: 20,
    };
  },
};
</script>

<style scoped>
.my-element {
  /* rem 单位定义其他属性 */
  font-size: 1rem;
  padding: 1rem;
  margin: 0 auto;
}

/* 定义不需要转换为 rem 的属性 */
.no-rem {
  border: 1px solid black;
}
</style>

3. 在这个组件中，我们使用 px 单位来定义组件宽度和字体大小，然后使用 rem 单位来定义其他属性。我们还添加了 .no-rem 类，使其不会被转换为 rem 单位。

最后，您可以使用媒体查询等技术来根据屏幕宽度动态调整根元素字体大小，以实现自适应页面布局。

希望这可以帮助您在 Vue 项目中进行 PC 端适配移动端。