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

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%;
}

编辑：这是我要调用的 FULL 组响应式样式。

  /* =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 让您可以在“浏览器”中显示页面时应用不同的样式 - 调整为 480 像素和 iPhone（最大设备宽度为 480 像素）。

示例 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 属性。

希望这会有所帮助。

Answer 2

在上面的示例中，缺少一个 右括号。

@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%;
  }
}