Таблица стилей загрузки медиа-запроса, когда она не должна - PullRequest
Новая
       5

Таблица стилей загрузки медиа-запроса, когда она не должна

2 голосов
/ 23 декабря 2011

Я создал базовую таблицу стилей, а также таблицу стилей медиазапроса, следуя философии прогрессивного улучшения, как показано ниже: 

<!-- Empty CSS file; base style for really old mobile browsers (128px,240px,<320px) -->
<link rel="stylesheet" href="css/global.css" media="all">
<!-- Layout for newer narrow viewport browsers, as well as desktop browsers -->
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 20em)">

Однако, когда я запускаю Firefox и изменяю его размер,меньше 320px, он все равно загружает layout.css вместо того, чтобы показывать мне страницу без стилей.Почему это так?

Дополнительно к этому (вместо того, чтобы задавать отдельный вопрос), если я добавлю несколько базовых стилей к global.css и добавлю один медиазапрос к layout.css, то последний макет будет отображеностается на странице, даже если я изменил размер браузера, чтобы он был меньше минимальной ширины для применения layout.css.

1 Ответ

2 голосов
/ 23 декабря 2011

Проблема здесь в том, что ваша минимальная ширина области просмотра для Firefox оказывается шире 320px, а это означает, что независимо от того, насколько узким вы изменяете размер окна, оно никогда не будет меньше 320px. Ваши стили layout.css всегда будут применяться в Firefox, поскольку область просмотра всегда соответствует требованию min-width 320px (и, вероятно, 20em). Попробуйте свои текущие настройки в Chrome (обычно Chrome имеет более узкую минимальную ширину области просмотра) и попробуйте что-то вроде min-width: 600px в Firefox, и ваши стили должны быть применены, как и ожидалось (layout.css будет применяться, когда область просмотра не меньше 600px широкий).

Редактировать

Это хороший демонстрационный сайт для медиа-запросов: Media Query Playground . Это позволит вам увидеть минимальную ширину области просмотра для различных браузеров - просто измените размер, пока значение ширины не перестанет меняться. Если вы вносите изменения в панель инструментов (добавляя / удаляя элементы) в Firefox, вы можете изменить минимальную ширину области просмотра.

...