css - 多个 CSS @media 条件似乎不起作用

Question

我正在尝试针对不同的屏幕分辨率修改我的 CSS 中的几个类，我的目标是:

• 1200+宽度默认应用CSS，
• 在 601 和 601 之间嵌入 css 中的媒体查询1199 px,//这是行不通的地方
• 针对 600px 及以下分辨率嵌入 css 的媒体查询

当我使用单一宽度条件时，例如 @media screen and (max-width: 600px) { ，CSS 会按应有的方式应用。

然而，当我尝试 @media screen and (max-width: 1199 px) and (min-width: 601){ 时，样式永远不会被应用..

我已经尝试交换这些条件的顺序，也只是有 @media screen 和 (max-width: 1199 px) 的基础上 600px 规则将在之后覆盖它，但对于一些它似乎不起作用的原因。明确一点，当我将屏幕缩小到小于 600 像素时，我要么使用默认样式，要么使用“最大宽度:600 像素”样式，我似乎无法获得适用于中间地带的样式。

我的 CSS 有任何明显的错误吗？/建议？将不胜感激!

我将我的 html 和 css 塞进了一个 jsfiddle，供任何想自己查看的人使用 http://jsfiddle.net/X6cZ7/3/ (在拖动网站 View 时观察导航栏 li 元素，它们在 <600px 处更改样式，但在 <1199 处也应显示为红色(用于测试)但它们不会)仅在 Chrome 上测试，以防相关.

CSS(底部的相关@media 内容..):

* {margin: 0; padding:0;}
body
{
font: normal 100% 'Poiret One', 'Trebuchet MS', sans-serif;
color: Grey;
background-image: url('Images/background_gradient.png');
background-repeat:repeat-x;
background-color: #d4ffaa;
margin: 0 auto;
height: auto;
max-width: 90%; 
}

h2
{ 
margin: 0.6em 0;
color: Grey;
border-bottom: 2px solid #d4ffaa; 
font: normal 2em 'Poiret One', 'Trebuchet MS', sans-serif;
}

#central_container
{
width: 100%;
margin: 0 auto;
height: 100%;
float: left;
}
#leftside_container
{
float: left;
width: 67.1%; 
clear: left;
}
    #header_container
    {
    width: 100%;
    max-height: 300px;
    height: 15em;
    }
        #header_title
        {
        width: 100%;
        height: 80%;
        }
            #header_title h1{ font-size: 4em; color: Ivory;}

        #navbar_container
        {
        width: 100%;
        height: 20%;
        }
            .navbar_links ul{ list-style-type: none; }
            .navbar_links li 
            { 
            display: inline;
            size: 4em;
            }
            .navbar_links a:link, a:visited 
            {
            font-size: 1.5em;
            text-align: center;
            text-decoration:none;
            padding: 0.1em 0.4em;
            color: Ivory;
            border-left:10px solid transparent;
            border-right:10px solid transparent;
            border-bottom: 10px solid Ivory;
            }
            .navbar_links a:hover, a:active 
            {
            color: Grey;
            border-bottom: 10px solid #d4ffaa;
            }

        #currentpage_container
        {
        background-color: Ivory;
        width: 100%;
        height: 20%;
        }
            #currentpage_content
            {
            font-family: 'Trebuchet Ms';
            padding: 1em 3em;
            }
            #currentpage_content p { padding: 0.8em;}

#rightside_container
{
float: right;
width: 33%;
}
    #register_container
    {
    width: 100%;
    max-height: 300px;
    height: 15em;
    }
        .bubble{
        background-color: Ivory;
        border-radius: 15px;
        -moz-border-radius: 15px;
        display: inline-block;
        position: relative;
        height: 80%;
        width: 100%;
        margin: 1em 0;
        }
        .bubble p 
        {
        padding: 1em;
        white-space: preline;
        font-weight: bold; 
        }
        .bubble::after { /*arrow*/
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent; 
        border-right: 30px solid Ivory; 
        content: '';
        position: absolute;
        left: -30px;
        top: 50%;
        }

    #contact_container
    {
    background-color: Ivory;
    width: 100%;
    }
    #contacts_content{ padding: 1em 3em; }
        #contacts_content .text
        {
        font: normal 0.9em 'Trebuchet Ms';
        padding: 0.8em 0;
        }
        .contactNum, .contactEmail { font-size:1.5em; }
        .contactNum::before { content:url(Images/phone_icon.gif);}
        .contactEmail::before { content:url(Images/email_icon.gif);}

    #logos_content
    {
    padding: 0.5em 3em;
    height: 150px;
    }
        .logo
        {
        display: none;
        max-width: 40%;
        position:relative;
        max-height: 40%;
        }
        .logo2
        {
        display: none;
        max-width: 40%;
        position:relative;
        max-height: 40%;
        right: -50%;
        }
    #social_content
    {
    padding: 1em 3em;
    }

/* SMALLER RESOLUTION CHANGES */

@media screen and (max-width: 1199 px) and (min-width: 601){
    .navbar_links ul{ list-style-type: none; }
    .navbar_links li 
    { 
    display: inline;
    background: Ivory;
    }
    .navbar_links a:link, a:visited 
    {
    font-size: 1.5em;
    padding: 0.1em 0.4em;
    color: red;
    border-left:3px solid transparent;
    border-right:3px solid transparent;
    border-bottom: 3px solid #d4ffaa;
    }
    .navbar_links a:hover, a:active 
    {
    color: Grey;
    border-bottom: 3px solid Grey;
    }
}
@media screen and (max-width: 600px) {
    #central_container,
    #leftside_container,
    #rightside_container,
    #header_container,
    #header_title,
    #navbar_container,
    #currentpage_container
    {
    float: none;
    width: auto;
    height: auto;
    }

    #header_title h1{ font-size: 3em; color: Ivory;}

    .navbar_links ul{ list-style-type: none; margin-bottom:1em;}
    .navbar_links li 
    { 
    display: inline;
    }
    .navbar_links a:link, a:visited 
    {
    padding: 0;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 2px solid Ivory;
    }
    .navbar_links a:hover, a:active 
    {
    border-bottom: 2px solid #d4ffaa;
    }

}

Answer 1

在你的 css 中有一些输入错误，因此它不起作用，请检查下面

不正确

@media screen and (max-width: 1199 px) and (min-width: 601){

}

正确一个

@media screen and (min-width: 601px) and (max-width: 1199px){

}

编辑:

值和单位之间不应该有任何空格，即 1199 px 是错误的，应该是 1199px。