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

Содержание

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

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

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

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

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

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

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

Вопрос задан

Просмотрен 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