Css не работает media: Почему не работают медиа запросы? — Хабр Q&A

Leave a Comment / Css / By /

Содержание

html — Медиа запрос не работает в Chrome

html — Медиа запрос не работает в Chrome — Stack Overflow на русском

Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.

Присоединиться к сообществу

Любой может задать вопрос

Любой может ответить

Лучшие ответы получают голоса и поднимаются наверх

Вопрос задан

3 года 4 месяца назад

Просмотрен 2k раз

Нужно на странице budova. org применять такой код В firefox всё прекрасно работает, а вот хром не хочет. Что я мог упустить?

body {
  margin: 0;
  padding: 0;
  font-family: 'Exo 2', sans-serif;
  text-decoration: none;
  background: #fff
}

a {
  text-decoration: none;
  color: #666666;
}

.layout {
  width: 96%;
  padding: 0 2% 0 2%;
  overflow: hidden;
}

.layout .col div {
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  color: #000;
}

.layout div img {
  width: 100%;
  border: 1px solid #bfbfbf;
}

.layout div h3 {
  font-size: 16px;
  text-align: center;
}

#logo {
  margin: 45px auto;
}

.col:hover {
  border: 1px solid #bfbfbf;
  margin: 0px;
}

.col {
  float: left;
  margin: 1px;
  width: 24%;
}

@media all and (max-width: 900px) {
  .col {
    float: left;
    width: 48%;
    height: 257px;
    background: red;
  }
}

@media all and (max-width: 700px) {
  .col {
    float: left;
    width: 48%;
    height: 200px;
    background: green;
  }
}
 
<!DOCTYdivE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Инженерные системы ЛТД - простые решения для Вашего дома!</title>
  <link rel="stylesheet" tydive="text/css" href="css.css" />
  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
  <link href="https://unpkg.com/[email protected]/dist/css/micron.min.css" type="text/css" rel="stylesheet">
  <script src="https://unpkg.com/[email protected]/dist/script/micron.min.js" type="text/javascript" async></script>
</head>

<body>
  <header>
    <div align="center">
      <img src="images/logo.png" ; alt="Logo IS" />
    </div>
  </header>

  <div>
    <div align="center">
      <div>
        <a href="https://devi.kiev.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/devi.png" alt="devi" /></div>
          <h3>Тёплый пол DEVI</h3>
        </a>
      </div>
    </div>
    <div align="center">
      <div>
        <a href="http://vac.budova.org/" target="_blank">
          <div><img data-micron="jelly" src="images/vac.png" alt="пылесос" /></div>
          <h3>Центральный пылесос</h3>
        </a>
      </div>
    </div>
    <div align="center">
      <div>
        <a href="http://carrera.budova.org/" target="_blank">
          <div><img data-micron="jelly" src="images/carrera.png" alt="carrera" /></div>
          <h3>Конвекторы Carrera</h3>
        </a>
      </div>
    </div>
    <div align="center">
      <div>
        <a href="https://devi.kiev.ua/snegotayanie/snegotayanie.html" target="_blank">
          <div><img data-micron="jelly" src="images/devi-ice.png" alt="Снеготаяние devi" /></div>
          <h3>Снеготаяние DEVI</h3>
        </a>
      </div>
    </div>

    <div align="center">
      <div>
        <a href="http://potopa.net.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/potopa.png" alt="Защита от потопа" /></div>
          <h3>Защита от потопа</h3>
        </a>
      </div>
    </div>
    <div align="center">
      <div>
        <a href="https://devi.kiev.ua/informatsiya/veria-2.html" target="_blank">
          <div><img data-micron="jelly" src="images/veria.png" alt="VERIA" /></div>
          <h3>Тёплый пол VERIA</h3>
        </a>
      </div>
    </div>
    <div align="center">
      <div>
        <a href="http://danfoss.biz.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/danfoss.png" alt="Danfoss" /></div>
          <h3>Продукция Danfoss</h3>
        </a>
      </div>
    </div>
    <div align="center">
      <div>
        <a href="http://airelec.com.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/6.png" alt="Airelec" /></div>
          <h3>Конвекторы Airelec</h3>
        </a>
      </div>
    </div>

  </div>

  <div></div>
</body>

</html>
Air

13.9k66 золотых знаков3131 серебряный знак5959 бронзовых знаков

задан 15 мар ’18 в 10:32

Kyzka ValeraKyzka Valera

355 бронзовых знаков

4
  1. Исправьте <!DOCTYdivE html> на <!DOCTYPE html> ( не относится к делу)
  2. Добавьте в head <meta name="viewport" content="width=device-width, initial-scale=1">
  3. CTRL+F5