为什么我的 CSS 媒体查询不起作用？答案

【问题标题】：Why my css media queries are not working?为什么我的 CSS 媒体查询不起作用？
【发布时间】：2021-03-02 17:14:30
【问题描述】：

我是一名新手（14 岁），目前我正在学习 Web 开发，我告诉你这个是因为我不知道任何“技术词或复杂词”，所以请简单回答语言。

问题：

我正在写这个媒体查询：

@media only for screen (max-width: 400px; ) {
     #box1 {
         font-size: 4em;
         color: white;
         border-left: 3em solid yellow;
     }
}

结果没有显示出来，那你能告诉我，代码中是否有任何错误？或者是别的什么

我使用 Google Chrome 作为浏览器，使用 Microsoft Visual Studio Code 作为代码编辑器

【问题讨论】：

此媒体查询在屏幕小于400px时生效。你使用小于 400 像素的屏幕吗？
如果您的目标屏幕大于 400 像素，请使用 'min-width' 而不是 max-width

标签： css google-chrome media-queries

【解决方案1】：

我不知道这是否会对您有所帮助，但有时，您只需要清除缓存即可再次加载 CSS。清除缓存：在您的计算机上，打开 Chrome。点击右上角的更多。单击更多工具。清除浏览数据。选中“Cookie 和其他网站数据”和“缓存的图像和文件”旁边的复选框。点击清除数据。

希望对你有帮助

【讨论】：

【解决方案2】：

我认为应该是：

@media only screen and (max-width: 400px; ) {
/*whatever code is in here*/
}

【讨论】：

你忘了和
w3schools.com/css/css_rwd_mediaqueries.asp w3schools 是初学者的好资源 :)

【解决方案3】：

尝试使用

 @media (max-width: 400px) {
        #box1 {
            font-size: 4em;
            color: white;
            border-left: 3em solid yellow;
        }
    }

注意：这适用于所有具有width < and = 400px的屏幕

【讨论】：