响应式布局

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

响应式布局介绍

在中小型设备上:

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

在平板/笔记本设备上:

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

在电脑设备上:

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

响应式配置

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

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

注意

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