我需要媒体查询的行为来更改单个 div 内的布局

Question

使用 CSS3 媒体查询，我的网站的网格布局相对于浏览器视口的宽度发生变化。

但现在我正在寻找一种方法来更改网格中特定块的布局。因此，它们的行为相对于其父元素的宽度有所不同。

例如，如果父元素的宽度为 +500px，我可以显示带有缩略图的标题，如果父元素的宽度小于 500px，则只显示标题，字体大小更大。

如果可能的话，最好的方法是什么？最好不使用 JavaScript。

这种方法应该允许我编写一个 HTML 块，可以在任何网站、页面上的任何位置重用，无论是否有响应式布局。

Answer 1

如果您已经在使用媒体查询，只需添加您想要的内容即可；
常规CSS：

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

-500 像素 css:
@media only screen and (max-width :500px) { .parent .child .thumbnails{display:none;}