媒体查询根本不起作用

Question

完成我的整个网站后，我被介绍了媒体查询，作为使我的网站响应的一种方式。 问题是，即使我在媒体查询上找到了很多资源并且我知道要输入什么，但它们根本不起作用。

我首先尝试测试媒体查询，以了解它是如何工作的。 这是代码：

<style> 
@media screen and (min-width:600px){

#bigfont
{
    font-size: 80px;
    line-height: 79px;
    font-family: dosis, sans-serif;
    font-weight: 300;
}
}
 </style> 

“bigfont”已经是css中的一种样式。 因此，在放置媒体查询时，它应该绕过原始样式并应用新参数。

由于我的笔记本电脑屏幕的宽度大于 600 像素，我原以为它可以工作，但没有。 我的目标是使用媒体查询来扩展我的内容，当涉及到一个非常大的屏幕时。

我什至将 min 更改为 max 以防万一没有结果。

更新 ：
我忘了提到我已经有了这个：

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

Answer 1

您需要在 HTML 页面的head添加一个viewport元元素，媒体查询才能生效。 例如

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

Answer 2

您是否尝试过@media all and (min-width:600px){ ？ 这通常为我修复它。

如果这不起作用，请尝试将值设置为!important （覆盖所有内容，因此您需要为大屏幕保留!important部分，因为您有min-width ，如果您有max-width ）。

    #bigfont
{
    font-size: 80px !important;
    line-height: 79px !important;
    font-family: dosis, sans-serif !important;
    font-weight: 300 !important;
}

Answer 3

我的只有在我将媒体查询块放在原始代码之后才起作用。

所以像这样：

Main code{
    .whatever{
    }
    #whatever{
    }
}
@mediaquery{
    .whatever{
     }
    #whatever {
    }
}

Answer 4

放置 !important 标签，即 'font-size: 80px !important;' 应用新参数