没有触发媒体查询

Question

I am creating a responsive site right now but unfortunately my media queries are not being triggered. 我现在正在创建一个响应式网站，但是很遗憾，我的媒体查询没有被触发。 I have supplied the code, completely copied and pasted as-is from my document that I am using, below. 我在下面提供了代码，完全从我正在使用的文档中复制并粘贴了代码。

Does anyone know what I am doing wrong that is preventing my media queries from being called? 有谁知道我在做错什么，阻止了我的媒体查询被调用？

<!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 & 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 的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) {
}

Answer 1

I believe you need a and between screen and the max/min width. 我相信你需要一个and屏幕和最大/最小宽度之间。 Also your first media query is missing an ending bracket (max-width: 1279px see 另外，您的第一个媒体查询缺少结尾括号(max-width: 1279px请参见

http://jsfiddle.net/QM54b http://jsfiddle.net/QM54b

@media screen and (min-width: 100px) and (max-width: 479px) {
    body {background: green;}
}

Because of the missing bracket, the rest of the media query will not be triggered 由于缺少括号，因此不会触发其余的媒体查询

没有触发媒体查询

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-06-19 16:33:04

没有触发媒体查询

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-06-19 16:33:04

解决方案1
3 已采纳 2014-06-19 16:33:04