Работает только первый медиа-запрос

При использовании мультимедийных запросов работает только первый набор, и я не знаю почему. Если я поменяю их, то все же, только первый работает. Я попытался перейти от max-width к min-width, я попытался удалить и условие, я попытался удалить все мои Javascript. Я попытался удалить все мои CSS, имея только медиа-запросы с телом {display: none}. Медиа-запросы находятся в конце моей таблицы стилей. Метаданные Viewport верны (см. Ниже).Работает только первый медиа-запрос

Ни одна из этих попыток не исправила мою проблему. Кто-нибудь понял, почему это происходит? Я работал с @media сто раз и никогда не сталкивался с этой проблемой.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

@media (max-width: 740px) and (min-width: 420px) { 
    .product { 
     width:45% !important; 
     margin:10px 10px 10px 10px !important; 
    } 

    .products-container select { 
     width:85%; 
    } 
} 

@media (max-width: 340px) { 
    body { 
     display:none; 
    } 
}

Update Я проверил консоль Фирефокса. Я на самом деле получаю следующую ошибку: Dangling combinator. Правила не учитываются из-за плохого выбора.

Я получаю то, что он пытается сказать, но нет ничего плохого в синтаксисе запросов.

источник

2013-07-30 Hiriji

Вы знаете, что эти мультимедийные запросы не предназначены для ширины между 340px и 420px .., а также для ширины> 740px ... правильно? – Danield

@ Danield Я. Эти медиа-запросы предназначены для изменения размеров продуктов между 420px и 740px, а затем для отображения тела на дисплее меньше, чем 340px. Первый запрос работает, второй игнорируется. – Hiriji

Посмотрите эту скрипту: http://jsfiddle.net/danield770/VRWdd/ - медиа-запросы работают нормально - т.е. ОБЯЗАТЕЛЬНЫЕ медиа-запросы работают вместе – Danield

Ничего, выдумал.

Там каким-то образом был скрытый персонаж в CSS. Это странно, учитывая, что я сам набрал все остальное, может быть, Dreamweaver поместил его там? Может быть, глюк? Во всяком случае, копирование его в MS Word и вставка его обратно в Dreamweaver исправила его.

P.S Спасибо за помощь!

источник

2013-07-30 09:22:56 Hiriji

Используете ли вы Notepad ++ или что-то для разметки? Иногда я пишу целый документ (css, html) и не проверяю кодировку. Изменение кодировки с ANSI на UTF-8 отображает мне странные символы (например, [e + v], этот материал). – Arkana

@Arkana Nope Я пишу прямо в Dreamweaver. Это просто странно, потому что раньше у меня не было проблем с этим. Опять же, в другом случае мой Dreamweaver разбился и заменил все мои CSS просто пробелами, поэтому угадать, что не всегда можно доверять :) – Hiriji

Итак, можете ли вы пометить свой ответ как правильный?Для помощи другим пользователям, которые пришли сюда с похожим вопросом :) (Не в теме, если мой DW сделает это для меня, крик будет прослушиваться в Omicron Persei 8 xD) – Arkana

Ваш media queries, как сейчас, когда удар в экран имеет ширину

0-340px (второй запрос СМИ) и

420px-740px (первый запрос СМИ)

они дону «т удовлетворить ширины между 340px и 420px .. а также для ширины> 740px

Но, конечно, оБА медиа запросы работают ....

См. Это FIDDLE

источник

2013-07-30 09:05:49 Danield

Вот почему это не имеет никакого смысла, потому что они не работают на моей стороне. Я проверил консоль - я обновил свой вопрос с тем, что он говорит. – Hiriji

Проверьте свою разметку для закрытых тегов – Danield

Работает только первый медиа-запрос

ответ

Смежные вопросы