quasar pc端自适应手机端布局页面代码样例

Quasar是一个基于Vue.js的现代化框架，它内置了响应式设计功能，能轻松实现PC端和移动端的自适应布局。下面是一个简单的HTML和CSS样例，展示了如何在Quasar项目中创建一个基本的响应式导航栏：

<!-- main.vue -->
<q-header view-title="标题">
  <q-navigation>
    <q-item v-if="$q.os === 'mobile'" @click="$router.push('/mobile-page')">手机页</q-item>
    <q-item v-else>桌面页</q-item>
    <!-- 其他导航项... -->
  </q-navigation>
</q-header>

<!-- CSS 样式 (放在main.scss 或 app.scss中) -->
.q-navigation {
  @media (max-width: 600px) {
    .hide-on-mobile {
      display: none;
    }
  }
}

在这个例子中，我们检查 `$q.os` 变量来判断当前设备是否是移动设备。如果是，我们会显示指向"手机页"的链接，并隐藏其他非移动相关的元素。`hide-on-mobile` 类可以在CSS中添加，用于控制在移动视口下不显示的内容。