跳至主要內容

响应式布局

大约 1 分钟界面界面响应式布局

整个主题都是响应式的,这意味着它可以在不同的屏幕尺寸上正常工作。

响应式布局介绍

在中小型设备上:

  • 导航栏中,站点名称会被隐藏,导航栏链接以及主题切换、全屏按钮之类的元素会被收起至额外的弹窗,并通过导航栏右侧的按钮进行切换;
  • 侧边栏会以侧拉菜单的形式显示并默认隐藏,导航栏左侧显示侧边栏切换按钮控制侧边栏侧弹出与收回;
  • 路径导航、正文、返回顶部按钮文字缩小
  • 当前页面的标题收起至侧边栏中

在平板/笔记本设备上:

  • 导航栏链接会显示在导航栏中
  • 侧边栏会以折叠菜单的形式显示
  • 当前页面的标题收起至侧边栏中

在电脑设备上:

  • 导航栏链接会显示在导航栏中
  • 侧边栏会紧贴在页面内容的左侧
  • 当前页面的标题将显示在页面右侧

响应式配置

主题提供了断点变量用于控制响应式布局的行为。你可以在 .vuepress/styles/config.scss 中修改它们:

  • $pc: 电脑响应式布局断点,默认为 1440px
  • $laptop: 笔记本响应式布局断点,默认为 1280px
  • $pad: 大型平板响应式布局断点,默认为 959px
  • $tablet: 平板响应式布局断点,默认为 768px
  • $mobile: 手机响应式布局断点,默认为 480px

注意

特别的,$tablet$pc 将只能基于像素大小。