0

Почему при вот таком вот коде:

@media all and (max-width: 1000px){
  body{
        background-color: black;
      }
}

Если поставить вместо 1000px число > 1000px, всё работает. Как только число < 1000 перестает работать вообще. В чем причина?

Вот сам проект: https://github.com/avoska/transformers

6
  • Масштаб в браузере не 100%. Ctrl+колесо. 11 авг 2016 в 11:27
  • i.imgur.com/o1iMwKR.png я поставил max-width: 800, не работает : ( 11 авг 2016 в 11:32
  • ну а вы уверены что за все этим видно хоть кусочек фона body? 11 авг 2016 в 11:34
  • Вот результат при 1500 i.imgur.com/3wrD2Zv.png 11 авг 2016 в 11:35
  • ну если уверены, значит добавьте ваш код в вопрос или на худой конец ссылку на проект, чтобы было с чем работать, а то мы же не телепаты, правда? 11 авг 2016 в 11:36

1 ответ 1

1

Чтобы работать с @media вам необходимо в head подключить:

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

Используйте only screen вместо all:

@media only screen and (max-width:1000px) {
  //some active
}

Пример:

.someClass {
  height: 200px;
  width: 200px;
  background-color: black;
 }

@media only screen and (max-width: 1000px) {
   .someClass {
     background-color: orange;
   }
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
</head>  
<body>
  <div class="someClass">

  </div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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