5

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

  • 默认应用 CSS 为 1200+ 宽度，
  • 嵌入在 css 中的媒体查询，用于 601 到 1199 像素之间的分辨率，//这不起作用
  • 嵌入在 css 中的媒体查询，分辨率为 600 像素及以下

例如，当我使用单一宽度条件时，@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 规则将在之后覆盖它，但由于某种原因它似乎不起作用。为了清楚起见，当我将屏幕缩小到小于 600 像素时，我要么得到默认样式，要么得到“最大宽度：600 像素”样式，我似乎无法获得适用于中间地带的样式。

我的 CSS 中有什么明显的错误吗？/建议？将不胜感激！

我将我的 html 和 css 塞进了一个 jsfiddle，供任何想亲自查看http://jsfiddle.net/X6cZ7/3/的人使用（在您拖动网站视图时观察导航栏 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;
    }

}
4

2 回答 2

22

在您的 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。

于 2012-06-20T11:25:03.927 回答
1

哟忘了把“px”放在最大宽度：1199。我认为这是造成问题。

无论如何，您应该首先为移动设备编码并继续为更大的分辨率编码。

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

于 2012-06-20T11:34:03.563 回答