Какие точки перелома (breakpoints) установлены в WordPress по умолчанию?

12 июн. 2019 г., 13:37:14
Просмотры: 21K
Голосов: 0

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

2
Комментарии

Возможный дубликат Настройка размеров предпросмотра устройств в кастомайзере WP 4.5

Antti Koskinen Antti Koskinen
12 июн. 2019 г. 13:42:49

WordPress использует определенные размеры для предпросмотра устройств в кастомайзере, но реальные точки перелома вашего сайта полностью определяются темой.

Jacob Peattie Jacob Peattie
12 июн. 2019 г. 14:07:30
Все ответы на вопрос 1
1

Ширина окна предварительного просмотра в Настройщике при выборе предпросмотра для планшета и мобильного устройства составляет 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 пикселях!

Помните, что эти кнопки предназначены для быстрого предпросмотра изменений в Настройщике. Пользователям не нужно показывать предпросмотр конкретных устройств. Кнопки предназначены для предпросмотра классов устройств. Например, кнопка планшета должна показывать усредненный планшет, а не конкретную модель.

Кроме того, кнопки предпросмотра не предназначены для разработки. Если вы разрабатываете новую тему, используйте инструменты разработчика в браузере и убедитесь, что ваш сайт выглядит хорошо на всех возможных размерах экрана. Это и есть адаптивный дизайн.

12 июн. 2019 г. 15:05:15
Комментарии

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

dj.cowan dj.cowan
15 апр. 2022 г. 09:58:02