Здравствуйте. Есть блоки, которые при определенном разрешении экрана должны становиться невидимы. Но у меня почему то не срабатывает. Что я делаю нет так?
body {
font-family: Arial, sans-serif;
font-size: 12pt;
}
@media screen and (max-width: 320px) {
.b320 { display: block; }
.b480 { display: none; }
.b640 { display: none; }
.b768 { display: none; }
.b1000 { display: none; }
}
@media screen and (max-width: 480px) {
.b320 { display: none; }
.b480 { display: block; }
.b640 { display: none; }
.b768 { display: none; }
.b1000 { display: none; }
}
@media screen and (max-width: 640px) {
.b320 { display: none; }
.b480 { display: none; }
.b640 { display: block; }
.b768 { display: none; }
.b1000 { display: none; }
}
@media screen and (max-width: 768px) {
.b320 { display: none; }
.b480 { display: none; }
.b640 { display: none; }
.b768 { display: block; }
.b1000 { display: none; }
}
@media screen and (max-width: 1000px) {
.b320 { display: none; }
.b480 { display: none; }
.b640 { display: none; }
.b768 { display: none; }
.b1000 { display: block; }
}
<div class="b320">media: <b>max-width: 320px</b></div>
<div class="b480">media: <b>max-width: 480px</b></div>
<div class="b640">media: <b>max-width: 640px</b></div>
<div class="b768">media: <b>max-width: 768px</b></div>
<div class="b1000">media: <b>max-width: 1000px</b></div>
Буду очень благодарен за помощь!
@media screen and (max-width: 1000px)
,` @media screen and (max-width: 768px)` а почему не по убыванию? и так было бы все нормальн