1
Я искал некоторую помощь в отношении медиа-запросов. Это первый раз, когда я использую это на сайте, но он, похоже, не работает. Это также первый раз, когда я меняю свой html4-код на html5, не уверен, что в этом проблема.Медиа-запросы, не работающие с изменением размера
Мой HTML код:
<!doctype html> <!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
Мой CSS:
body {
margin:0 auto;
background:#f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration:none;
font-weight:bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color:#0CF;
}
header {
margin:0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height:59px;
}
#banner {
margin:0 auto;
width: 883px;
height: 439px;
background:url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height:24px;
}
#cols {
margin: 0 auto;
height:188px;
width:883px;
}
#spacer3 {
height:39px;
}
footer {
margin: 0 auto;
height:98px;
width:883px;
}
<!-- MEDIA QUERIES -->
@media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
При изменении размера браузера до уровня ниже 850px цвет по-прежнему остается неизменным и не меняется на красный.
Привет Майкл. Не могли бы вы согласиться с нижеследующим ответом? Для этого нажмите на галочку слева от ответа, поэтому вопрос будет отмечен как разрешенный. Благодаря! – halfer