媒体查询根本不起作用

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 像素，所以我希望它能正常工作，但它没有。我的目标是使用媒体查询，以便在涉及到非常大的屏幕时扩大我的内容。

我什至将最小值更改为最大值以防万一没有结果。

更新：
我忘了说我已经有了这个：

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

Answer 1

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

<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

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

Answer 4

我的只有在我把媒体查询块放在原始代码之后才有效。

像这样：

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

媒体查询根本不起作用

Media query doesn't work at all

html

css

media-queries