1

Здравствуйте. Есть блоки, которые при определенном разрешении экрана должны становиться невидимы. Но у меня почему то не срабатывает. Что я делаю нет так?

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>

Буду очень благодарен за помощь!

5
  • а как вы решили что не работает ?
    – user33274
    8 ноя 2016 в 12:25
  • @Geyan при изменении размера окна браузера не появляется соответствующая разметка
    – iKey
    8 ноя 2016 в 12:27
  • codepen.io/Geyan/pen/oYXyqo?editors=110 у меня работает ваша схема
    – user33274
    8 ноя 2016 в 12:28
  • @Geyan странно. А тут если выполнить кол работает?
    – iKey
    8 ноя 2016 в 12:30
  • @media screen and (max-width: 1000px) ,` @media screen and (max-width: 768px)` а почему не по убыванию? и так было бы все нормальн 8 ноя 2016 в 12:31

2 ответа 2

2

Если ширина меньше 320, то она и меньше 1000. А из css-правил выбирается последнее. Поэтому надо просто переставить все блоки в обратном порядке:

body {
    font-family: Arial, sans-serif;
    font-size: 12pt;
}

@media screen and (max-width: 1000px) {
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: none; }
    .b768 { display: none; }
    .b1000 { display: block; }
}

@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: 640px) {
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: block; }
    .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: 320px) {
    .b320 { display: block; }
    .b480 { display: none; }
    .b640 { display: none; }
    .b768 { display: none; }
    .b1000 { display: none; }
}
<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>

1

Вот так будет работать:

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) and (min-width: 320px){
    .b320 { display: none; }
    .b480 { display: block; }
    .b640 { display: none; }
    .b768 { display: none; }
    .b1000 { display: none; }
}

@media screen and (max-width: 640px) and (min-width: 480px) {
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: block; }
    .b768 { display: none; }
    .b1000 { display: none; }
}

@media screen and (max-width: 768px) and (min-width: 640px){
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: none; }
    .b768 { display: block; }
    .b1000 { display: none; }
}

@media screen and (max-width: 1000px) and (min-width: 768px) {
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: none; }
    .b768 { display: none; }
    .b1000 { display: block; }
}

jsFiddle, у вас при маленьких разрешениях срабатывают сразу несколько медиазапросов.

1
  • c некоторого времени писать min-width в паре с max-width писать вроде ни требуется
    – user33274
    8 ноя 2016 в 12:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.