媒体查询在 css 中不起作用的问题

Question

您好，我遇到了媒体查询问题。我不知道问题出在哪里，但看颜色似乎不起作用。

我是 css 的新手，但我试图通过在我的 html 文档中添加下面的内容来修复它（在查看其他帖子后），但它似乎仍然无法正常工作。

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

这是我在 css 文档中尝试过的代码：

.newestpost {
    line-height: 20px;
    height: 400px;
    display: ;
    width: 600px;
    float: left;
    margin: 30px 50px;

    @media screen and (min-width: 1312px) and (max-width: 3000px)   
    {
        width: 100%;
        float: left;
        margin: ;
    }
}

Answer 1

@media 查询应该是包含 CSS 规则的顶级语句。您不能将其嵌套在 CSS 规则中。

改成这样，看看行不行：

.newestpost {
    line-height: 20px;
    height: 400px;
    display: ;
    width: 600px;
    float: left;
    margin: 30px 50px;
}

@media screen and (min-width: 1312px) and (max-width: 3000px)   
{
    .newestpost {
        width: 100%;
        float: left;
        margin: ;
    }
}

Answer 2

你应该在媒体上提到你的 css class。并且您不能在 class...

中使用 @media

.newestpost {
    line-height: 20px;
    height: 400px;
    display: ;
    width: 600px;
    float: left;
    margin: 30px 50px;
}

@media screen and (min-width: 1312px) and (max-width: 3000px)  { 
   .newestpost {
        width: 100%;
        float: left;
        margin: ;
    }
}

Answer 3

首先，您需要在标签中指定 class，您需要在其中应用样式

class="newestpost" name="viewport" content="width=device-width, initial-scale=1.0">

.newestpost {
line-height: 20px;
height: 400px;
display: ;
width: 600px;
float: left;
margin: 30px 50px;
}

@media screen and (min-width: 1312px) and (max-width: 3000px)   
{
    .newestpost {
        width: 100%;
        float: left;
        margin: ;
    }
}

媒体查询在 css 中不起作用的问题

Problem with media queries not working in css

css

media-queries