Показывать сообщения на странице на основе медиа-запроса?

#php #wordpress #posts

#php #wordpress #Публикации

Вопрос:

У меня есть цикл изображений плиток на моей главной странице (тизеры) до полного списка содержимого на другой странице архива.

Оформление следующим образом

от 320 до 650 пикселей, плитки занимают 100% экрана.

от 650 пикселей до 950 пикселей, плитки занимают 50% экрана (2 раза рядом).

при максимальной ширине 950 пикселей плитки занимают 33,333% экрана (3 раза рядом).

Изначально для posts_per_page было установлено значение 12, поэтому формат сетки выглядел великолепно: 2,3,6,9,12 работают фантастически в этом макете.

Однако мы с клиентом согласились, что для тизера слишком много плиток, и он хотел вернуть его к 8 или 9 максимум.Проблема в том, что в диапазоне от 650 пикселей до 950 пикселей я теперь получаю синдром уродливой одиночной плитки. Поскольку 9 не кратно 2.

Есть ли способ в приведенном ниже коде (args) упорядочить сообщения на странице на основе медиа-запросов? Идеальной ситуацией было бы отображение 8 с разрешением до 950 пикселей, а затем 9 на больших экранах.

Ценю любые советы.

 <?php
    $injuries_args = array(
        'post_type' => 'injuries',
        'post_status' => 'publish',
        'posts_per_page' => '9'
    );
    $loop_one = new WP_Query($injuries_args);
?>
 

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

1. Php не заботится о медиа-запросах, ваш интерфейс должен запускать перезагрузку при выполнении специального размера.

2. Вы можете загрузить свою сетку через AJAX, передав параметр, чтобы сообщить PHP разрешение просмотра и динамически изменять количество элементов… но это не лучшее решение, поскольку оно не полностью подходит для RWD: если кто-то изменит размер браузера, вы вернетесь к первоначальной проблеме, поскольку элементы снова будут выглядеть «уродливо». Хороший компромисс: поговорите со своим клиентом и предложите вместо этого показать 6 сообщений (и обязательно объясните им, почему вы это предлагаете).

3. Хорошо, спасибо, как и было предложено, я вернусь к 6 плиткам. Мне было любопытно узнать, возможно ли это другим способом. Спасибо за помощь.

4. Ну, вы могли бы запускать вызов AJAX для извлечения сообщений каждый раз, когда изменяется размер окна (ну, после его изменения для повышения производительности), как предложил Юстинас выше, чтобы достичь того, чего вы хотите, но тогда вам также нужно будет обновить ссылки на страницы (prev, next, 1, 2, 3и т.д.) также динамически, поэтому в ссылке на следующей странице перечислены нужные сообщения. Это хлопотно, ха-ха, но стоит изучить, если вы готовы пойти по этому пути. (Но если после сетки нет ссылок на следующую / предыдущую нумерацию страниц, то, конечно, это не такая уж большая проблема.)