Html CSS中带有@media的响应式设计

我试图使我的网站响应，但它不工作。 使用@media，我想定义不同的区域，但使用我的代码，没有任何机会

    @media (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}

---

有什么问题吗？

确保元标记嵌入到

中：

html:

尝试定义类型

@media all and (max-width: 1400px){
     your code
}

并确保在head标记中添加meta标记

<meta name="viewport" content="width= device-width, initial-scale= 1.0">

---

确保将媒体查询放在代码的末尾。另外，不要忘记将此元标记添加到html文件中的head元素。

顺便说一下，请尝试如下编辑查询：

@media only screen and (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}

---

您的

@media

规则缺少右括号（

}

）。只是忘了复制。您确定这些标记是ID而不是类吗？如果类使用。而不是#。此外，我可能会为这些元素中的每一个添加一个位置，例如位置：相对或位置：绝对（取决于您的要求）。请参见此处：标记是ID，我已经为所有标记定义了位置

@media screen和（最大宽度：1400px）{…//代码的其余部分}

@media only screen and (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}