vue 实现pc端和移动端的自适应

Vue.js 是一个渐进式 JavaScript 框架，它具有高效、灵活和易于维护等特点，因此在前端开发中广受欢迎。在实际开发中，我们经常需要实现一个网站或应用程序的自适应，以适应不同设备的屏幕大小和分辨率。本文将介绍如何使用 Vue.js 实现 PC 端和移动端的自适应。

1. 媒体查询

媒体查询是 CSS3 中的一个强大功能，可以根据设备的特性对样式进行调整。在实现自适应时，我们可以通过媒体查询来设置不同的样式。例如，我们可以在 CSS 中设置一个针对移动端的媒体查询：

```css

@media (max-width: 768px) {

/* 移动端样式 */

}

```

这样，当屏幕宽度小于等于 768 像素时，就会应用移动端的样式。

在 Vue.js 中，我们可以通过绑定 class 或 style 的方式来应用不同的样式。例如，我们可以在 Vue 模板中设置一个针对移动端的 class：

```html