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

Question

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

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

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

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

感谢您的帮助

Answer 1

.page-id-59, img {

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

你应该删除那个逗号

Answer 2

此选择器

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

使用类page-id-59以及网站上的所有img元素来所有元素。

如果您只想使用类img来处理页面上的page-id-59个元素，请使用逗号进行编写：

.page-id-59 img {...