媒体查询不会覆盖原生样式？

Question

我想知道为什么我的一些媒体查询没有覆盖它们被调用的视口的本机样式.我正在尝试响应一个菜单,堆叠,并在WP主题中使导航区域的高度更长.但是我通过在Safari或FF检查元素中编辑Live CSS来添加我创建的规格以获得此效果的每一种方式 - 我在目标的特定视口下插入的样式都没有被读取.我知道我正在使用媒体查询,因为它读取新样式,只是不覆盖原生？我在这里错过了一些东西？这是我想要添加的不会阅读的内容.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

#access li {
    float: none; // To translate to not to float to the left stack
    position: relative;
}

#access {
    background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: block;
    float: left;
    height: 240px; //Changed the height to allow stack
    width: 100%;
}

编辑:这里是全组的响应风格我打电话,如果事情.

  /* =Responsive Structure
----------------------------------------------- */

@media (max-width: 800px) {
    body {
        padding: 0;
    }
    #page {
        margin-top: 0; overflow: hidden;
    }
    #branding {
        border-top: none;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        #socialpost { margin-left: -100px; }
        p {font-size: 12px; }
        #sublogo { display: none; }
        #footcontain {  padding-left: 0;}

        #access a {
        color: #000000;
        display: block;
        font-family: arial;
        line-height: 3.11em;
        padding: 0 20px;
        text-decoration: none;
        #access a { font-size: 12px; }

        #access li {
        float: left;
        margin-left: -28px;
        position: relative; }
}

@media (max-width: 650px) {
    /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
    body {
        padding: 0;
    }
    #page {
        margin-top: 0;
    }
    #branding {
        border-top: none;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        p {font-size: 12px; }
        #sublogo { display: none; }

        #access a {
         color: #000000;
         display: block;
         font-family: arial;
         line-height: 3.11em;
         padding: 0 13px;
         text-decoration: none;
         font-size: 11px;}
         #footcontain {  padding-left: 0;}
         #access a {
         padding: 0 15px; }

}

@media (max-width: 450px) {
        #content .gallery-columns-2 .gallery-item {
    width: 45%;
    padding-right: 4%;
    }
    #content .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        p {font-size: 10px; }

       .entry-content, .entry-summary {
        padding: 1.625em 0 0;
        width: 48%; }
        #footcontain {  padding-left: 0;}

        #branding #s {
       -moz-transition-duration: 400ms;
       -moz-transition-property: width, background;
       -moz-transition-timing-function: ease;
        float: right;
        height: 35px;
        width: 47px; }

        .widget-title { margin-top: 35px; }

        .flexslider .slides img {
         border: 0 none;
         display: block;
         max-width: 100%;
         padding-bottom: 25px; }
         #footcontain {  display:none;}

         #access li {
         float: none;
         position: relative;
         }

         #access {
         height: 70px;
         }

         #access a {
         color: #000000;
         display: block;
         font-family: arial;
         font-weight: bolder;
         line-height: 3.11em;
         padding: 0 10px;
         text-decoration: none;
         }

         #access ul {
         font-size: 10px;
         list-style: none outside none;
         margin: 0 0 0 -80px;
         padding-left: 0;
         }

        .flex-control-nav { display: none; }
        .flexslider {
         margin: 0 0 67px; }
        .flex-caption {  display: none; } //Could Display this here, need to make take half of slider

}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body { padding: 0; }

        #access {
        height: 70px;
        }

    #page {
        margin-top: 0; overflow: hidden;
    }
    #branding {
        border-top: none;
    }
        #signup { display:none; }
        #adbox { display:none; }
        #adbox2 { display:none; }
        p {font-size: 10px; }
        #sublogo { display: none; }
        #access a { padding: 0 10px; }

        #access li {
        float: none;
        position: relative;
        }

       .entry-content, .entry-summary {
        padding: 1.625em 0 0;
        width: 35%; }
        #footcontain {  display: none; }

       #branding #s {
         -moz-transition-duration: 400ms;
         -moz-transition-property: width, background;
         -moz-transition-timing-function: ease;
         float: right;
         height: 35px;
         width: 47px; }

        #footcontain { display: none; }

        .widget-title { margin-top: 35px; } //Attempt to Create Space for Slider Page Nation
        #access { height: 70px; }

        #access li {
        float: none;
        position: relative;
        }

       .flex-control-nav { display: none; }

       .flex-caption {  display: none; } //Could Display this here, need to make take half of slider, check 
       .flexslider {
       margin: 0 0 67px; }

}

Answer 1

CSS您帖子中的代码无效,因为它是特定于设备的样式,您可以使用笔记本电脑/台式机在Safari,Chrome或Firefox上查看.您忘记了当Media Queries您在"浏览器"中显示页面时,您可以应用不同的样式 - 调整大小为480px和iPhone(最大设备宽度为480px).

CSS示例:

/* max-width */
@media screen and (max-width: 480px) {
    .one {
        background: #F9C;
    }
}

/* min-width & max-width */
@media screen and (min-width: 480px) and (max-width: 900px) {
    .two {
        background: #9CF;
    }
}

/* min-width */
@media screen and (min-width: 900px) {
    .three {
        background: #F90;
    }
}

/* iphone specific css */
@media screen and (max-device-width: 480px) {
    .iphone {
        background: #ccc;
    }
}

在上面的示例中,您可以定位两者,并且仍然为您选择的设备提供单独的样式.如果你想在一个browser只是使用min-width或max-width属性测试它.

希望这可以帮助.