0
Cette question a été posée plusieurs fois. J'ai essayé d'appliquer des solutions postées sur mon projet, mais je n'arrive toujours pas à obtenir une réponse à @media.La requête @media ne fonctionne pas (code CSS généré par POSTCSS)
Voici mon code HTML.
code CSS généré à l'aide POSTCSS utilisant plugin psotcss-propre
<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>
Mon CSS Code
.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
}
Vous devez placer l'@media en dehors de la règle '.col-6 {}'. L'imbrication de classe CSS n'est pas autorisée. Qu'a dit la webconsole de votre navigateur? –
Vous avez raison. Je pense que le problème est avec mon plugin postcss qui n'a pas converti le code dans la bonne syntaxe. Je peux vérifier avec les développeurs de ce plugin. –