Мне нужно поведение медиа-запросов, чтобы изменить макет внутри отдельных div

Question

Макет сетки моего сайта изменяется относительно ширины области просмотра браузера с помощью CSS3 Media Queries.

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

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

Если это вообще возможно, каков наилучший подход для этого?Желательно без использования JavaScript.

Этот подход должен позволить мне написать один блок HTML, который можно повторно использовать на любом сайте, в любом месте страницы, с адаптивным макетом или без него.

Answer 1

, если вы уже используете медиа-запросы, просто добавьте к ним то, что вы хотите;
обычный css:

.parent .child .thumbnails, .parent .child .titles {display: block} -500px

-500 px css:
экран @media only и (max-width: 500px) {.parent .child .thumbnails {display: none;}