Не записывает стили на breakpoints css

206

20 августа 2018, 04:40

Прошу помочь разобраться с несложной проблемой, с которой мне пришлось столкнуться.

Есть разметка:

<div class="container">
    <div class="imagebox"></div>
</div>

И стиль для него, для примера такой :

.container {
    width: 1000px;
}

Мне нужно изменить размер на разных разрешениях, и так как я начинаю с десктопа то после основных стилей я решил воспользоваться медиазапросом, для некоторых разрешений:

@media (min-width: 1024px) and (max-width: 1279px) {
   .container {
        width: 750px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        width: 500px;
    }
}
@media (max-width: 767px) {
    .container {
        width: 250px;
    }
}

Но проблема возникает почему-то на последнем разрешении, которое от 0 до 767, на этом разрешении сохраняются стили которые записаны с 768 до 1023.

Пробовал @media (max-width: 767px), @media (min-width: 0px) and (max-width: 767px), @media only screen and (max-width: 767px), вообщем всё что удалось раскопать в интернете, но почему-то ничего не сработало.

Подскажите, возможно где-то есть явная ошибка, может запросы выставлены не в том порядке, или не в том месте?

Answer 1

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="imagebox">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam placeat harum saepe, unde fugit consectetur. Ad eligendi quidem labore officia 
        </div>
    </div>
</body>
</html>

и CSS

    @media screen and (max-width: 200px) {
    .imagebox {
        background-color: red;
    }
}
@media screen and (min-width: 201px)  and (max-width: 400px) {
    .imagebox {
        background-color: orange;
    }
}
@media screen and (min-width: 401px)  and (max-width: 600px) {
    .imagebox {
        background-color: green;
    }
}
@media screen and (min-width: 601px)  and (max-width: 800px) {
    .imagebox {
        background-color: blue;
    }
}
@media screen and (min-width: 801px)  and (max-width: 1000px) {
    .imagebox {
        background-color: indigo ;
    }
}
@media screen and (min-width: 1001px)  and (max-width: 1200px) {
    .imagebox {
        background-color: violet ;
    }
}
@media screen and (min-width: 1201px) {
    .imagebox {
        background-color: purple ;
    }
}

p.s.

Даже не посмотрел на твой код. Он рабочий, только надо добавить meta тег -

<meta name="viewport" content="width=device-width, initial-scale=1.0">

чтобы в Хроме и других браузерах все норм отображалось.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как запретить растягивание textarea через css?

Всем привет, как я могу запретить растягивание textarea через css?

220

HTML

Форма заполнения HTML [закрыт]

Всем привет, подскажите, как сделать такую форму? Заранее спасибо

208

HTML

Как убрать автозаполнение input?

Еще один вопрос, работаю с input и постоянно предлагает выбрать предыдущие данные, как это убрать?

177

HTML

Добавить ещё больше разных колёс

Помогите с небольшим скриптом: Как добавить еще пунктов в меню и задать значения к ним? Уже как только не пробовал, подскажите в какую сторону...

262