Question

我正在尝试修改我的CSS中的几个类以获得不同的屏幕分辨率，我的目标是：

1200+宽度的默认应用CSS，
嵌入在css中的媒体查询，用于601和60之间的分辨率 1199 px，//这是什么不起作用
css中嵌入的媒体查询，分辨率为600px及以下

当我使用单一宽度条件时，例如@media screen and (max-width: 600px) {，css应用它应该是。

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

我已经尝试交换这些条件的顺序，并且只有@media screen and (max-width: 1199 px)基于600px规则将在之后覆盖它但由于某种原因它似乎不起作用。为了清楚起见，当我将屏幕缩小到600px以下时，我要么拥有默认样式，要么使用'max-width：600px'样式，我似乎无法获得适用于中间地板的样式。

我的CSS中有任何明显的错误？/建议？不胜感激！

我把我的html和css联合起来给任何想要亲眼看看的人http://jsfiddle.net/X6cZ7/3/（当你拖动网站视图时观察导航栏li项目，他们改变样式为＆lt; 600px但是应该看起来也是红色（用于测试）在＆lt; 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。

Answer 2

哟忘了把“px”放在max-width：1199。我认为这会造成问题。

无论如何，您应首先为移动设备编码＆amp;继续编码以获得更大的分辨率。

你的小提琴：http://jsfiddle.net/X6cZ7/4/

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

2 个答案:

不正确

纠正一个