0
Этот вопрос задан несколько раз. Я попытался применить решения к моему проекту, но я до сих пор не могу получить @media запрос.@media запрос не работает (код CSS, созданный POSTCSS)
Вот мой код HTML.
код CSS генерируется с использованием POSTCSS с помощью psotcss-аккуратный Plugin
<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
}
Вы должны поместить @media вне '.col-6 {}' правилом. Вложенность классов CSS не допускается. Что скачал веб-консоль вашего браузера? –
Вы правы. Я думаю, проблема связана с моим плагином postcss, который не преобразовал код в правильный синтаксис. Я могу проверить с разработчиками этого плагина. –