为什么这个媒体查询不起作用？答案

【问题标题】：Why isn't this media query working?为什么这个媒体查询不起作用？
【发布时间】：2016-11-14 19:24:43
【问题描述】：

当在较小的屏幕/设备上查看时，我试图为网站上的所有页面触发较小的图像。我已经为某个页面写了这个，但它不起作用。它要么无意或根本不适用于所有页面。

@media screen and (min-width : 240px) and (max-width : 667px) {
    .page-id-59, img {
        height: 80%;
        width: 80%;
    }
}

另外，最好的方法是什么？它应该加载小尺寸的图像还是下载大尺寸的图像并将其缩放到屏幕上？我不确定最好的事情是什么。

查询中的 page-id 用于标识特定页面，但它没有这样做。

感谢您的帮助

【问题讨论】：

【解决方案1】：

.page-id-59, img {

你是说“所有带有'page-id-59'类的项目或所有带有标签IMG的项目”

你应该删除那个逗号

【讨论】：

【解决方案2】：

这个选择器

.page-id-59, img {...

使用类page-id-59 和网站上的所有img 元素来处理所有元素。

如果您只想使用类page-id-59 处理页面上的img 元素，请不要使用逗号：

.page-id-59 img {...

【讨论】：

不同页面上的特定照片怎么样？我不能使用 .page-id-000 img { 来处理元素。建议？
要处理特定照片，您可以简单地将 ID 应用于 img 标记（在 HTML 中）并为此设置 CSS 规则，或者将 nth-of-type 选择器与page 类，如.page-id-47 img:nth-of-type(3) {...}，将处理第 47 页的第三张图片。