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使您可以在“浏览器”中显示页面时应用不同的样式 - 调整为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属性。

希望这有帮助。

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

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

2 个答案: