CSS3 медиа-запросы не работают - PullRequest
Новая
       47

CSS3 медиа-запросы не работают

5 голосов
/ 11 апреля 2011

Недавно я разрабатывал мобильную версию для веб-сайта, и просто хочу иметь возможность изменять файл CSS, если обнаруживается, что браузер находится на мобильном устройстве. Вы можете просмотреть мои предыдущие попытки здесь , но теперь я решил, что наиболее реальный способ сделать это - сосредоточиться на медиазапросах.

Проблема, с которой я столкнулся, заключается в том, что медиазапросы просто не работают вообще. Он всегда загружает таблицу стилей по умолчанию. Вот код, который у меня есть: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

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

Ответы [ 4 ]

6 голосов
/ 11 апреля 2011

Таблица стилей по умолчанию не имеет атрибутов, которые могли бы помешать ее загрузке.

Вы можете указать media="screen and (min-width: 481px)", но это может привести к опасности того, что старые браузеры тоже не загрузят его.

Обычно лучше всего загружать таблицу стилей по умолчанию и простоубедитесь, что мобильная таблица стилей переопределяет все, что вам не нужно, из таблицы стилей по умолчанию.

2 голосов
/ 23 июля 2012

Завершение условного с min-device-width работало для меня на iOS.Обратите внимание на слово устройство.Тем не менее, он прекрасно работал на Android даже без слова устройства.

1 голос
/ 18 февраля 2014

Если у вас есть initial-scale=1.0 и maximum-scale=1.0, то немного избыточно иметь также user-scalable=0. Если установить максимальный масштаб равным начальному масштабу, это означает, что пользователь вообще не может увеличивать масштаб, поскольку он начинает с максимального увеличения.

1 голос
/ 31 августа 2013

Я использовал загрузчик на пресс-сайте, но он не работал на IE8, я использовал css3-mediaqueries.js javascript, но все еще не работает. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css

вот пример: 

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css Линия связи такая же простая, как и над строкой.

...