Question

在我说明的移动视口中，我不小心为我的媒体查询遗漏了一些正确的语法。它显示正确，这很棒，但我想使用正确的语法，并很想知道为什么/如何发生。以下是涉及的风格。

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) 

    ul.ui-tabs-nav li.ui-state-active a {
    background-color: #C6C699;
    height: 17px;
    text-shadow: none;
    width: 77px;
    }

    .content .full header, .content .full .entry-summary, .content .full   .entry-content, .content .full .entry-meta, .content .full .edit-link {
    margin-top: 3px;
    padding: 15px;
    width: 100%;
    }

    #topbgimg { display: none; }

    #topvidarea {
    margin-left: 21%;
    margin-right: 20%;
    margin-top: -5px;
    max-width: 400px;
    }

    #topmenucontain { display: none; }

    .fmenu { display: none; }

    #clogo { display: none; }

    #youtube1, #youtube2 { display: none; }

    #wrapper {
        margin: 0 1em;
    }

    h1 {
        font-size: 2em;
    }

    #logoimg { display: none; }

    #notification {
    height: 200px;
    margin: 0;
    width: 100%;
    padding-top:20px;
    } 

    .ui-tabs .ui-tabs-nav li a {
    border: 3px solid white;
    color: white;
    }

    #branding {
        width: 100%;
        padding: 1em 0;
        margin: 0;
        text-align: center;
    }

    #topbtn, #topbtn2, #topbtn3 {
    width: 75px;
    }

    #topbtnbuy {
    background: none repeat scroll 0 0 #C6C699;
    border: 1px solid #C6C699;
    color: #333333;
    display: inline;
    float: left;
    font-family: Georgia;
    font-size: 12px;
    height: 42px;
    margin-right: 10px;
    margin-top: -1px;
    width: 25%;
    }

    a.box:link {
    min-width: 70%;
    } 

    nav#access {
    border-bottom: 1px dashed #CFCFCF;
    position: relative;
    text-align: center;
    }

    nav#access ul.menu li:nth-child(n+5) {
    display: none;
    }

    .content {
    min-height: 0;
    background-image: none !important;
    border-bottom: 1px dashed #CFCFCF;
    }

    /* Hide Background & Overlay Images */
    .overlay {
    display: none;
    }

    .has-background {
    min-height: 0;
    }

    .content header, .content .entry-summary, 
    .content .entry-content, .content .edit-link, 
    footer.entry-meta {
    width: 100%;
    }

    .content header, .has-background header {
    margin-top: 2em;
    }

    .content header h2 a, .single .content header h2 {
    font-size: 2em;
    }

    .content section.right, 
    .content section.left,
    .content section.full,
    .content section.center {
        padding: 0;
    }

    .content section.center header, 
    .content section.center .entry-summary, 
    .content section.center .entry-content, 
    .content section.center .edit-link,
    .content section.center footer.entry-meta,
    .content section.right header, 
    .content section.right .entry-summary, 
    .content section.right .entry-content, 
    .content section.right .edit-link,
    .content section.right footer.entry-meta  {
        left: 0;
    }

    #comments {
        margin: 1em 0;
    }

    #comment, #commentform input, 
    #commentform #submit, #commentform #comment {
        width: 416px;
    }

    .commentlist {
        width: 424px;
    }

    #commentform #submit {
        width: 430px;
    }
    #comments, #commentform #comment-reply {
        width: 100%;
    }

    .cat-links, .entry-meta .sep:nth-child(n+4),
    .comments-link, .edit-link {
        display: none;
    }

    /* Footer */
    #footer {
        width: 100%;
        padding: 1em 0;
    }

    #footer-widgets {
        margin-bottom: 1em;
    }

    #footer .widget {
        width: 45%;
        margin: 0.5em 0;
    }

    .third-box {
        width: 89%; 
    }

    #buybutton { width: 95%; }

    .scrolldowntext { margin-top: 40px; }

    #notification {
    background-color: #333333;
    border-bottom: 5px solid #C6C699;
    font-size: 22px;
    height: 200px;
    padding-top: 20px;
    position: absolute;
    width: 100%;
    z-index: 9990;
    }

    #topcaption {
    display: none;
    }

    #logoimg { display: none;}

    #topmenucontain { 
    margin: -33px auto 0;
    width: 50%; }

    a.box:link {
    color: #C6C699;
    display: inline;
    float: left;
    font-family: Georgia;
    font-size: 12px;
    height: 50px;
    margin-right: 10px;
    min-width: 75px;
    }   

    #videoscreenshot { height: 215px; width: 100%; }

    .fancybox-iframe { display: hidden; }

}

在“{”结尾处遗漏了额外的 @media only screen and (min-width: 320px) and (max-width: 480px)后，我的所有媒体查询都被阅读了吗？

更新： 尝试删除指定的上述视口中的所有样式，尝试正确地从头开始，以防某些样式是什么。但是，在开始之前，我只是试图隐藏视口中的顶部菜单。这被忽略了，而不是出于某种原因而渲染？

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {


#topvidarea {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: -265px;
    max-width: 400px;
}

#topmenucontain { display: none; }

}

Answer 1

您的媒体查询中没有左括号，但您确实有一个结束括号：

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

您可能正在阅读的所有其他媒体查询，因为您没有正确关闭第一个查询，因此查询不知道从哪里开始和结束。

使用错误的语法读取媒体查询

1 个答案: