Какие точки перелома (breakpoints) установлены в WordPress по умолчанию?
Когда вы заходите на свой сайт и нажимаете "Настроить", вы можете изменить макет вашего сайта для планшетов и мобильных устройств. Какие именно точки перелома (breakpoints) установлены в WordPress по умолчанию для Desktop, Tablet и Mobile? Возможно ли изменить эти значения по умолчанию?

Ширина окна предварительного просмотра в Настройщике при выборе предпросмотра для планшета и мобильного устройства составляет 720px
и 320px
соответственно.
Эти значения заданы только в CSS, поэтому нет хуков или других способов для их переопределения. Исходные стили определены в файле /wp-admin/css/themes.css
и выглядят следующим образом:
.preview-mobile .wp-full-overlay-main {
margin: auto 0 auto -160px;
width: 320px;
height: 480px;
max-height: 100%;
max-width: 100%;
left: 50%;
}
.preview-tablet .wp-full-overlay-main {
margin: auto 0 auto -360px;
width: 720px; /* Размер основан на типичном размере "планшета". Намеренно размыт — он не соответствует точно какому-либо конкретному устройству. */
height: 1080px;
max-height: 100%;
max-width: 100%;
left: 50%;
}
Если вам действительно нужно изменить эти размеры, вы можете сделать это, загрузив пользовательские стили для Настройщика, например:
function wpse_340269_customizer_styles() {
?>
<style>
.preview-tablet .wp-full-overlay-main {
width: 680px;
}
.preview-mobile .wp-full-overlay-main {
width: 375px;
}
</style>
<?php
}
add_action( 'customize_controls_print_styles', 'wpse_340269_customizer_styles' );
Несмотря на все вышесказанное, формулировка вашего вопроса может указывать на недопонимание касательно контрольных точек (breakpoints), адаптивного дизайна и роли WordPress в этом.
Эти размеры предназначены только для предпросмотра сайта в Настройщике. Они абсолютно не влияют на фронтенд сайта. То, как ваш сайт отображается на мобильных устройствах, не зависит от этих размеров и определяется исключительно вашей темой.
Что касается контрольных точек, они также не имеют отношения к этим размерам. "Контрольные точки" — это не реальная вещь. В CSS авторы тем могут изменять стили в зависимости от размера экрана пользователя. Некоторые разработчики выбирают 2-3 конкретных размера экрана, на которых все элементы дизайна изменяются, но это всего лишь их выбор. Другие разработчики могут использовать плавные элементы, которые вообще не меняются резко, в то время как другие элементы могут адаптироваться на совершенно разных размерах экрана — просто потому, что так выглядит лучше.
Суть в том, что не все темы имеют три конкретных макета на одних и тех же трех размерах экрана. Существует почти бесконечное количество способов, которыми разработчик/дизайнер может адаптировать дизайн под разные размеры экранов.
Еще один важный момент: не все мобильные устройства и планшеты имеют одинаковый размер экрана. Если вы измените предпросмотр планшета на 768 пикселей, вы получите более точный предпросмотр для iPad (но не для iPad Pro), но это не отменяет того, что некоторые планшеты имеют меньшие экраны, поэтому вам всё равно нужно убедиться, что всё выглядит хорошо на 720 пикселях!
Помните, что эти кнопки предназначены для быстрого предпросмотра изменений в Настройщике. Пользователям не нужно показывать предпросмотр конкретных устройств. Кнопки предназначены для предпросмотра классов устройств. Например, кнопка планшета должна показывать усредненный планшет, а не конкретную модель.
Кроме того, кнопки предпросмотра не предназначены для разработки. Если вы разрабатываете новую тему, используйте инструменты разработчика в браузере и убедитесь, что ваш сайт выглядит хорошо на всех возможных размерах экрана. Это и есть адаптивный дизайн.

Похоже, Гутенберг с этим не согласен. Когда WordPress начал проект Gutenberg, они случайно или непреднамеренно открыли ящик Пандоры. Блоки, такие как колонки и навигационные блоки, требуют адаптивного CSS. Теперь основные блоки WordPress включают @media-запросы. Разделение контента от логики приложения было нарушено. Нарушено элегантно, но всё же нарушено.
