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中的一种风格。因此，在放置媒体查询时，应该绕过原始样式并应用新参数。

由于我的笔记本电脑屏幕的宽度大于600px，我期待它能够正常工作，但事实并非如此。我的目标是使用媒体查询，以便在涉及到大屏幕时扩展我的内容。

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

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

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

Answer 1

您需要向HTML页面的viewport添加head元元素，才能使媒体查询生效。 E.g。

<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

Put！important标签，即'font-size：80px！important;'应用新参数

媒体查询根本不起作用

4 个答案: