为什么我的媒体功能“最大宽度”不起作用？答案

【问题标题】：Why is my media feature 'max-width' not working?为什么我的媒体功能“最大宽度”不起作用？
【发布时间】：2022-01-14 11:23:42
【问题描述】：

这是我网站的标题图片：

header {
    background-image: url('../dogsimages/header-image.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    width: 100%;
    height: 700px;
}

但是，我想更改宽度小于 375 像素的屏幕的背景图像。所以，我应用了这个媒体规则：

@media (max-width: 376px) {
    header {
        background-image: url('../dogsimages/german-shepher-for-header.jpg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover;
        width: 100%;
        height: 700px;
    }
}

问题是它不起作用。这很奇怪，因为如果我将媒体功能 (max-width: 375px) 更改为 (min-width: 375px) 它将起作用，但对我来说毫无意义。

【问题讨论】：

它看起来不错，图像存在吗？您是否看到在开发者控制台中应用的更改？
适合调试：注释掉您的 background-images 并改用不同的 background-colors - 这样，您将能够找出真正发生的事情。
你试过了吗...@media only screen and (max-width: 376px) { ...... }
您的<head> 中有元标记<meta name="viewport" content="width=device-width, initial-scale=1.0"> 吗？

标签： css media-queries

【解决方案1】：

它工作正常，我附上了大屏幕的星云图像和小屏幕的宇宙飞船图像。

* {
  margin: 0 auto;
  font-family: Helvetica;
}
html {
  background-color: #e9e9e9;
}

header {
    background-image: url('http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png');
/*     background-color:red; */
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    width: 100%;
    height: 700px;
}

@media (max-width: 376px) {
    header {
        background-image: url("http://commondatastorage.googleapis.com/codeskulptor-assets/space%20station.png");
/*        background-color:pink; */
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: cover;
        width: 100%;
        height: 700px;
    }
}

&lt;header&gt;&lt;/header&gt;

可能的错误

检查图片路径
检查 css 文件是否嵌入良好

您也可以注释掉background-color 以查看更改。

【讨论】：