CSS 中 @media 的响应式设计答案

【问题标题】：Responsive Design with @media in CSSCSS 中 @media 的响应式设计
【发布时间】：2021-01-11 13:43:41
【问题描述】：

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

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

有什么问题吗？

【问题讨论】：

您的 @media 规则缺少右大括号 (})。
忘了复制
你确定这些标签是 ID 而不是类？如果类使用 .代替＃。此外，我可能会为每个元素添加一个位置，例如位置：相对或位置：绝对（取决于您的要求）请参见此处：w3schools.com/cssref/pr_pos_top.asp
标签是 ID，我已经为它们定义了位置
@media screen and (max-width: 1400px) { ...// rest of your code }

标签： html css sass responsive-design

【解决方案1】：

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

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

顺便说一下，尝试像这样编辑查询：

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

【讨论】：

【解决方案2】：

确保您在<head> 中嵌入了元标记：

html:

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

css:

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

/* your code */

}

【讨论】：

【解决方案3】：

尝试定义类型

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

并确保在头标签中添加元标签

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

【讨论】：