#html #css #twitter-bootstrap #responsive-design #media-queries
#HTML #css #twitter-bootstrap #адаптивный дизайн #медиа-запросы
Вопрос:
Я создаю адаптивный сайт прямо сейчас, но, к сожалению, мои медиа-запросы не запускаются. Я предоставил код, полностью скопированный и вставленный как есть из моего документа, который я использую, ниже.
Кто-нибудь знает, что я делаю неправильно, что мешает вызову моих медиа-запросов?
<!DOCTYPE html>
<!-- USE THIS ONE WHEN WP GOES <html <?php language_attributes(); ?>>!-->
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<!-- Icon !-->
<link rel="icon" href="images/favicon.png" type="image/png">
<link rel="shortcut icon" href="images/favicon.png" type="image/png" />
<!--<link rel="profile" href="http://gmpg.org/xfn/11" /> !-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
</head>
<!-- USE THIS ONE WHEN WP GOES <body <?php body_class(); ?>> !-->
<body>
<!-- header !-->
<div id="wrapper">
<!-- navigation -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#"><img src="images/logo.png" width="300" height="131" alt="Logo"/></a>
</li>
<li><a href="#">Engagement</a>
</li>
<li><a href="#">Diamonds</a>
</li>
<li><a href="#">Jewelry</a>
</li>
<li><a href="#">Watches</a>
</li>
<li><hr /></li>
<li><a href="#">About</a>
</li>
<li><a href="#">News amp; Events</a>
</li>
<li><a href="#">Contact</a>
<li><hr /></li>
<li> insert social media icons here </li>
</li>
</ul>
</div>
<!-- end header !-->
<!-- content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-md-12">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consectetur lobortis metus, eu lacinia lorem mollis eu. Etiam faucibus in diam sed rhoncus. Aliquam a aliquam ante, in sollicitudin est. Aenean vehicula viverra commodo. Nullam malesuada metus odio, id luctus lorem dapibus vel. Proin sit amet leo vel diam pharetra mattis eu sed ante. Proin ut metus tellus. Pellentesque lorem justo, mollis ut auctor vel, aliquam vel tortor. Cras ut lectus mauris. Aenean porta at dolor id imperdiet. Donec neque velit, commodo id suscipit et, ultricies et orci. Nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p>
</div>
<div class="col-md-6">
<p class="well">Cras ut lectus mauris. Aenean porta at dolor id imperdiet. Donec neque velit, commodo id suscipit et, ultricies et orci. Nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p>
</div>
<div class="col-md-6">
<p class="well">Cras ut lectus mauris. Aenean porta at dolor id imperdiet. Donec neque velit, commodo id suscipit et, ultricies et orci. Nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p>
</div>
<div class="col-md-4">
<p class="well">Cras ut lectus mauris. Aenean porta at dolor id imperdiet. Donec neque velit, commodo id suscipit et, ultricies et orci. Nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p>
</div>
<div class="col-md-4">
<p class="well">Cras ut lectus mauris. Aenean porta at dolor id imperdiet. Donec neque velit, commodo id suscipit et, ultricies et orci. Nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p>
</div>
<div class="col-md-4">
<p class="well">Cras ut lectus mauris. Aenean porta at dolor id imperdiet. Donec neque velit, commodo id suscipit et, ultricies et orci. Nullam ante mauris, congue eget laoreet eget, rhoncus vitae enim.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/* Fonts */
@import url('http://fonts.googleapis.com/css?family=Droid Sans');
/* Global */
@-ms-viewport {
width: device-width;
}
#wrapper {
padding-left: 340px;
transition: all 0.4s ease 0s;
}
.inset {
padding: 20px;
}
/* Navigation */
#sidebar-wrapper {
margin-left: -340px;
left: 340px;
width: 340px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#page-content-wrapper {
width: 100%;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 340px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 131px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
/* Responsive Fixes */
@media screen (min-width: 1100px) and (max-width: 1279px {
}
@media screen (min-width: 980px) and (max-width: 1199px) {
}
@media screen (min-width: 481px) and (max-width: 979px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
margin-left: 0;
left: 0;
width: 100%;
height: 230px;
}
#sidebar-nav {
width: 100%;
}
.inset {
padding: 15px;
}
}
@media screen (max-width: 480px) {
}
Ответ №1:
Я считаю, что вам нужен and интервал между экраном и максимальной / минимальной шириной. Также в вашем первом медиа-запросе отсутствует конечная скобка (max-width: 1279px см.
@media screen and (min-width: 100px) and (max-width: 479px) {
body {background: green;}
}
Из-за отсутствия скобки остальная часть медиа-запроса не будет запущена
Комментарии:
1. Боже мой, я знал, что это было что-то нелепое. Спасибо!