沒有觸發媒體查詢

Question

我現在正在創建一個響應式網站，但是很遺憾，我的媒體查詢沒有被觸發。 我在下面提供了代碼，完全從我正在使用的文檔中復制並粘貼了代碼。

有誰知道我在做錯什么，阻止了我的媒體查詢被調用？

<!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

/* 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

我相信你需要一個and屏幕和最大/最小寬度之間。 另外，您的第一個媒體查詢缺少結尾括號(max-width: 1279px請參見

http://jsfiddle.net/QM54b

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

由於缺少括號，因此不會觸發其余的媒體查詢

沒有觸發媒體查詢

問題描述

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