Html @媒体查询不工作（由POSTCSS生成的CSS代码）_Html_Css_Postcss

Html @媒体查询不工作（由POSTCSS生成的CSS代码）

html css

Html @媒体查询不工作（由POSTCSS生成的CSS代码）,html,css,postcss,Html,Css,Postcss,这个问题已经被问了好几次了。我试图将发布的解决方案应用到我的项目中，但仍然无法使@media查询工作这是我的HTML代码使用psotcsniat插件使用postss生成的CSS代码 <html> <head> <title>Starter Template</title> <meta name="viewport" content="width=device-width" /> <link rel="

这个问题已经被问了好几次了。我试图将发布的解决方案应用到我的项目中，但仍然无法使

@media

查询工作

这是我的

HTML

代码

使用psotcsniat插件使用postss生成的CSS代码

<html>
<head>
    <title>Starter Template</title>
    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" type="text/css" href="css/dest/grid.css" media="screen">
</head>
<body>
    <div class="container">
        <div class="col-6"><p>This is some text</p></div>
        <div class="col-6"><p>This is another some text</p></div>
        <div class="col-6"><p>Yet another some text</p></div>
        <div class="col-6"><p>Also, This is another some text</p></div>
    </div>
</body>

您必须将@media置于.col-6{}规则之外。不允许CSS类嵌套

（放在这里，以便您可以结束问题…

您必须将@media放在

.col-6{}

规则之外。不允许CSS类嵌套。你浏览器的网络控制台上说了什么？你是对的。我认为问题在于我的PostSS插件没有将代码转换成正确的语法。我可以向这个插件的开发者咨询一下。

.container:after 
{
    clear: both;

}

.container 
{
    max-width: 64em;
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.container:before, .container:after 
{
    content: " ";
    display: table;
}
.col-6 
{
    @media screen and (max-width: 767.999px) 
    {
        display: block;
        float: left;
        margin-right: 2.35765160%;
        width: 100.00000000%;
        &:last-child 
        {
            margin-right: 0;
        }
    }

    display: block;
    float: left;
    margin-right: 2.35765160%;
    width: 48.82117420%;
    margin-right: 0
}