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

Question

我想知道为什么我的一些媒体查询没有覆盖它们被调用的视口(viewport)上的原生样式。我正在尝试响应式地重新设置菜单样式，以堆叠并在 WP 主题中使导航区域的高度更长。但是我通过在 Safari 或 FF 检查元素中编辑 Live CSS 来添加我创建的规范以获得这种效果的每一种方式 - 我在我定位的特定视口(viewport)下插入的样式没有被读取。我知道我在读取新样式时正确使用了媒体查询，只是没有覆盖 native ？我在这里遗漏了什么？这是我要添加的内容，但不会阅读。

@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 上(具有最大设备宽度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;
    }
}

在上面的示例中，您可以将两者都定位，并且仍然为您选择的设备提供单独的样式。如果您想在 浏览器 中测试它，只需使用 min-width 或 max-width 属性即可。

希望这对您有所帮助。