html的媒体查询[关闭]答案

【问题标题】：Media Query of html [closed]html的媒体查询[关闭]
【发布时间】：2022-10-20 18:40:25
【问题描述】：

Please click here to see My HTML and CSS code

https://jsfiddle.net/r4cwn9db/

在这里提出解决方案或问题

【问题讨论】：

请分享更多详细信息，例如涉及的代码以及您解决问题的尝试
点击可以看到代码
请加全部通过编辑此问题的相关信息。在您的问题中单击文本“单击此处”不会执行任何操作
请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放入问题本身反而。 Stackoverflow 确实支持inline live demos
将随机文本标记为代码以绕过“没有链接到 JS Fiddle 的问题本身没有代码”检测是不酷的。

标签： html

【解决方案1】：

您的媒体查询中有错字（请参阅和）：

你的代码：

@media screen and(max-width:1020px) {
    #container{
        width:900px;
    }
}
@media screen and(max-width:800px) {
    #container{
        width:500px;
    }
}
@media screen and(max-width:600px) {
    #container{
        width:auto;
    }
}

工作代码：

@media screen and (max-width:1020px) {
    #container{
        width:900px;
    }
}
@media screen and (max-width:800px) {
    #container{
        width:500px;
    }
}
@media screen and (max-width:600px) {
    #container{
        width:auto;
    }
}

【讨论】：

非常明确的解决方案

【解决方案2】：

您可以尝试从代码中删除 screen and。当您在 CSS 中使用 @media 时，您需要遵循一些规则。如果您以以下格式编写，则可以使用。

@media (max-width:767px){
// write CSS here
}

此外，您可以在这里学习：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习
好的解决方案好工作