给我写一个vue2适配平板的css

以下是一个简单的适配平板的 CSS，可以在 Vue2 中使用：

/* 适配平板 */
@media screen and (max-width: 768px) {
  /* 调整字体大小 */
  body {
    font-size: 16px;
  }

  /* 调整布局 */
  .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  }

  /* 隐藏某些元素 */
  .hidden-on-tablet {
    display: none;
  }

  /* 调整某些元素位置 */
  .move-on-tablet {
    margin-top: 10px;
  }
}

在 Vue2 的组件中，可以通过以下方式引入：

<template>
  <div class="container">
    <h1 class="move-on-tablet">标题</h1>
    <p class="hidden-on-tablet">在平板上不显示的段落</p>
    <p>普通段落</p>
  </div>
</template>

<style>
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  }

  .hidden-on-tablet {
    display: none;
  }

  .move-on-tablet {
    margin-top: 10px;
  }
}
</style>

这样就可以适配平板了。需要注意的是，这只是一个简单的示例，实际开发中还需要根据具体需求调整 CSS 样式。