这个问题已被问过好几次了。我尝试应用发布到我的项目的解决方案,但我仍然无法使@media
查询工作。
这是我的HTML
代码。
使用psotcss-neat插件使用POSTCSS生成的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
}
答案 0 :(得分:0)
您必须将@media置于.col-6 {}规则之外。不允许使用CSS类嵌套。
(放在这里,所以你可以关闭这个问题......)