这个问题已经被问过好几次了。我尝试应用发布到我的项目的解决方案，但我仍然无法让@media查询工作。
这是我的HTML代码。
使用 POSTCSS 使用 psotcss-neat 插件生成的 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>
我的CSS代码
.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
}