Почему мой медиа-запрос 320 пикселей не применяется?

У меня есть два медиа-запроса:

@media  (min-width: 320px) and (max-width: 359px){
    .hero-unit h1 {
        margin-bottom: 0;
        font-size: 0.2em;
        line-height: 0.5em;
        letter-spacing: -5px;
        color: inherit;
    }
    .hero-unit p {
        font-size: 0.2em;
        font-weight: 10;
        line-height: 0.5em;
        color: inherit;
    }   
    .hero-unit {
        background: url("../img/now320.jpg");
        height: 5em;
        width: 15em;      
        padding: 0.5em;
        margin-bottom: 2em;
        background-color: #eeeeee;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }   
    h2 {
        font-size: 2em;
        font-weight: 20;
        line-height: 0.5em;
        color: inherit;
    }   
}

@media (min-width: 360px) and (max-width: 479px) {
    .hero-unit h1 {
        margin-bottom: 0;
        font-size: 0.2em;
        line-height: 1em;
        letter-spacing: -5px;
        color: inherit;
    }
    .hero-unit p {
        font-size: 0.2em;
        font-weight: 50;
        line-height: 1em;
        color: inherit;
    }   
    .hero-unit {
        background: url("../img/now360b.jpg");
        padding: 1em;
        margin-bottom: 2em;
        height: 10em;
        width: 18em;
        background-color: #eeeeee;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }   
    h2 {
        font-size: 2em;
        font-weight: 20;
        line-height: 1em;
        color: inherit;
    }   
}

Я пытаюсь понять, почему правило ширины 320 вообще не применяется к моей HTML-странице, хотя я изменил его размер с помощью инструмента адаптивного дизайна в Firefox, чтобы он имел ширину 320 пикселей.

Я проверил стили CSS с помощью Firebug, чтобы узнать, что происходит. Я вижу только применение @media (min-width: 360px) and (max-width: 479px) части. То есть это не тот случай, когда правило CSS, которое, как мне кажется, должно применяться, перезаписывается. Происходит то, что правило никогда не применяется. Почему?


css media-queries viewport
person dot    schedule 02.10.2012    source источник
comment
Можете ли вы опубликовать полный код страницы / ссылку?   -  person Giona    schedule 02.10.2012

Ответы (2)


arrow_upward
1
arrow_downward

Иногда браузеры просто не допускают, чтобы область просмотра была меньше определенного размера, и я думаю, что эта строка опустилась примерно на 360, поэтому она может просто не регистрироваться, даже с помощью упомянутого вами инструмента. Не могу сказать, потому что мне нужно увидеть живой пример.

Вы проверяли сайт на реальном мобильном устройстве или хотя бы на эмуляторе? Opera Mobile Emulator довольно прост в использовании.

Кроме того, если вы хотите работать в первую очередь с мобильных устройств - есть идея сначала написать свой CSS для 320 устройств с без мультимедийных запросов в качестве «базового» опыта. . Здесь вы указываете семейства шрифтов, цвета, обычно применяемые стили. Затем вы добавляете медиа-запросы для работы с большими и большими размерами, и именно здесь вы указываете изменения в макете и размере текста. Дело в том, что не оборачивайте свои стили 320-359 в медиа-запрос, так как это будет основным опытом для всех.

person chipcullen    schedule 02.10.2012
comment
Насколько точен этот эмулятор Opera Mobile? Скачал и пробую. Некоторые размеры устройства сильно отличаются. как серия Asus EEE .... - person dot; 02.10.2012
comment
Я не уверен, каким образом вы измеряете точность, но я точно не знаю. (Честно говоря, я в основном использую эмулятор iOS в XCode, это просто больно копать.) Если вы имеете в виду размер экрана, имейте в виду, что ваш настольный монитор имеет гораздо меньшую плотность пикселей, чем эти устройств. Вот хорошее описание того, как использовать эмулятор: mobile.smashingmagazine.com/2012/08/30/ Следует отметить, что его можно подключить к отладчику Opera Dragonfly (он же Firebug для Opera) - person chipcullen; 02.10.2012

arrow_upward
1
arrow_downward

Если вы хотите, чтобы правило 320 пикселей применялось ко всей странице, вам нужно написать его так:

@media  (min-width: 320px)

без каких-либо и (min-width ....) после него

person Caelea    schedule 02.10.2012