Медиа-запросы читаются с неправильным синтаксисом - PullRequest
Новая
       8

Медиа-запросы читаются с неправильным синтаксисом

0 голосов
/ 12 марта 2012

Однажды я случайно пропустил некоторый правильный синтаксис для своих медиазапросов в указанном мобильном окне просмотра. Он отображается правильно, и это здорово, но я хотел бы использовать правильный синтаксис, и мне интересно знать, почему / как это происходит. Ниже приведены стили. 

/* 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; }

}

1 Ответ

1 голос
/ 12 марта 2012

У вас нет открывающей скобки в медиа-запросе, но у вас есть закрывающая: 

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

Все остальные медиа-запросы, где, вероятно, читаются, потому что вы не правильно закрыли свой первый запрос, и, следовательно,запрос не знал, где начинать и заканчивать.

...