Адаптивный макет
Меньше 1 минуты
Вся тема адаптивна, что означает, что она хорошо работает на разных размерах экрана.
Введение в адаптивный макет
На мобильных устройствах:
- На панели навигации имя сайта будет скрыто, а такие элементы, как ссылки панели навигации, переключатель тем и полноэкранная кнопка, будут свернуты в дополнительное всплывающее окно и переключаться с помощью кнопки в правой части панели навигации;
- Боковая панель будет отображаться в виде бокового меню и скрыта по умолчанию, а кнопка переключения боковой панели отображается в левой части панели навигации для управления всплывающим окном и убиранием боковой панели;
- Навигация по пути, основной текст, текст кнопки «Вверх» имеют меньший размер шрифта.
- Заголовок текущей страницы свернут в боковую панель
На планшетах/ноутбуках:
- Ссылки на панели навигации появятся в панели навигации
- Боковая панель будет отображаться как сворачиваемое меню
- Заголовок текущей страницы свернут в боковую панель
На устройстве ПК:
- Ссылки на панели навигации появятся в панели навигации
- Боковая панель будет прикрепляться к левой части контента на странице
- Название текущей страницы будет отображаться в правой части страницы
Отзывчивая конфигурация
Темы предоставляют переменные контрольные точки для управления адаптивным поведением макета. Вы можете изменить их в .vuepress/styles/config.scss:
$pc: Контрольная точка макета для ПК, по умолчанию1440px$laptop: Контрольная точка адаптивного макета ноутбука, по умолчанию1280px$pad: Контрольная точка макета, реагирующего на большую панель, по умолчанию959px$tablet: Контрольная точка адаптивного макета планшета, по умолчанию768px$mobile: Контрольная точка адаптивного макета для мобильных устройств, по умолчанию480px
В частности, $tablet и $pc будут основываться только на размере пикселя, если вы его измените, вам также необходимо установить mobileBreakPoint и pcBreakPoint с измененным размером пикселя.