vue pc端自适应平板，手机各个移动端屏幕

在Vue项目中实现PC端和移动端的自适应，可以通过以下方法：

1. 使用CSS媒体查询来定义不同屏幕尺寸下的样式规则。
2. 使用flex布局或者grid布局来实现响应式设计。
3. 使用第三方库如lib-flexible和vw单位来简化响应式设计。

以下是一个简单的例子，展示如何使用flex布局和媒体查询来实现自适应设计：

<template>
  <div id="app">
    <header class="header">Header</header>
    <nav class="nav">Navigation</nav>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
 
  body, html {
    height: 100%;
  }
 
  #app {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
 
  .header, .footer {
    height: 50px;
    background-color: #ddd;
    flex: 0 0 auto;
  }
 
  .nav {
    flex: 0 0 50px;
    background-color: #eee;
  }
 
  .main {
    flex: 1;
    overflow: auto;
    background-color: #fafafa;
  }
 
  @media screen and (min-width: 768px) {
    #app {
      flex-direction: row;
    }
 
    .nav, .main {
      flex: 1;
    }
 
    .header, .footer {
      flex: 0 0 50px;
    }
  }
</style>

在这个例子中，我们使用了flex布局来构建页面的基础结构，并通过媒体查询来定义在屏幕宽度大于或等于768px时的布局。这样，页面就可以在PC端和移动端上以类似的方式展示，同时适应不同的屏幕尺寸。