Вопрос по css, html5 – Почему мой медиа-запрос CSS игнорируется или переопределяется?

7

Это сводит меня с ума! Я посмотрел на несколько вопросов о Stackoverflow и увидел, что элемент ID имеет приоритет над элементом класса (это полезно знать, но у меня есть ощущение, что это не моя проблема). Это мое меню НАВИГАЦИИ, с которым я борюсь. (Я использую максимальную ширину кстати)

Вот ОБЩИЙ CSS для моего NAV:

nav{ float:right; margin-left:2%;}
nav ul{ float:left; list-style:none; width:100%;}
nav ul li{ float:left; margin-left:5px; }
nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; 
font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }

Теперь, когда область просмотра меньше 1140 пикселей, я хочу, чтобы CSS изменил меню следующим образом:

nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}

Поэтому в основном меню будет перемещаться влево с меньшим количеством верхних отступов.

Когда Viewport - ПОД 800px, я хочу, чтобы CSS изменил меню следующим образом:

nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}

Как вы можете видеть, я только изменил NAV Float на NONE

Теперь, когда я тестирую его, ОБЩИЙ CSS работает нормально так же, как и когда порт просмотра менее 1140px, но как только я перехожу под 800px, NAV все еще плавает влево !! ?? Кажется, он наследует медиа-запрос CSS размером 1140 пикселей? Есть идеи?

ОБНОВИТЬ: Вот как я определяю свои медиа-запросы

<link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
(max-device-width: 800px)" href="small-device800.css" />
<link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
(max-device-width: 1140px)" href="small-device1140.css" />  
Вы можете создать jsfiddle своего вопроса. ?? нам будет очень полезно ответить вам Saurabh
Я довольно новичок в адаптивном дизайне и медиа-запросах. Я не уверен, что вы имеете в виду под «Описал ваши реальные медиа-запросы, о которых идет речь»? Вышеупомянутый CSS - это просто фрагменты CSS из моих медиа-запросов CSS-файлов. MSchumacher
апросы @Media - это части вашего css, которые описывают предпосылки для использования различных классов. Например: «когда ширина <800 пикселей» и так далее. Они выглядят так: Css3.info / предварительный просмотр / медиа-запросы Per Salbark
Попробуй добавить!important на вашfloat:none правило; Попробуйте проверить активные стили и переопределения элемента в инструментах разработчика Chrome или аналогичных инструментах в выбранном вами браузере. Кроме того, вы не описали свои настоящие медиа-запросы. lanzz
Медиа-запросы определены либо в<link> теги, с которыми вы загружаете CSS или в@include правила в файлах CSS. Вы только намекаете, что используетеmax-width, но используемые вами запросы отсутствуют в вашем вопросе. Тем не менее, я считаю, что более вероятно, что другие правила с более высокой специфичностью имеют приоритет над вашимfloat правило. lanzz

Ваш Ответ

3   ответа
9

что-то не так с вашими медиа-запросами? Попробуйте что-то вроде этого:

@media all and (min-width: 1140px) {
    nav ul li { float:left; }
}

@media all and (max-width: 1139px) and (min-width: 800px) {
    nav ul li { float:left; }
}

@media all and (max-width: 799px) {
    nav ul li { }
}
Эта же логика применяется при использовании запросов к тегам <link />. Ваши текущие ссылки ОБА целевые ширины меньше 800. Убедитесь, что добавили правило минимальной ширины для второй ссылки. Per Salbark
Вы видите, я уверен, что мои медиа-запросы верны, так как я использовал их на другом сайте раньше (см. Мой комментарий выше "Я сделал сайт раньше ..."), и он работал на 100% ... хотя Я немного поэкспериментирую с вашим методом. MSchumacher
Отличная помощь, приятель! MSchumacher
1

http: //jsfiddle.net/RJm3c/1

http: //jsfiddle.net/RJm3c/1/embedded/result <- измените размер браузера, чтобы увидеть результат

css:

  nav{ float:right; margin-left:2%;}
  nav ul{ float:left; list-style:none; width:100%;}
  nav ul li{ float:left; margin-left:5px; }
  nav a{ display:inline-block; float:left; text-transform:uppercase;}
  /*for test only*/
  body{ background-color: green}

  @media only screen and (max-width: 1140px), only screen and (max-device-width: 1140px) {
    nav ul li{ float:none;}
    nav a{ float:none; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: red}
  }

  @media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    nav ul li{ float:left;}
    nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: blue}
  }

Хмммм ... это работает на 100%! Я уже некоторое время бездельничаю, и у меня есть ощущение, что это был мой ткач сновидений или мой браузер, который давал мне ложные результаты, потому что, кажется, все работает сейчас. Я собираюсь изучить это сейчас и ответить на свой вопрос, чтобы дать разъяснения MSchumacher
css-свойства переопределяются в файле сверху вниз ... поэтому даже если вы измените порядок расположения @media в файле, вы получите неожиданные результаты !! попробуйте сначала нацелиться на более широкий экран (в вашем случае сначала 1140 пикселей, затем 800 пикселей). Saurabh
Great - это кривая обучения (адаптивный дизайн и медиазапросы). Спасибо за ваши усилия, вы легенда! MSchumacher
1

я поместил все свои запросы @media в отдельную таблицу стилей под названием «отзывчивый», и она работала нормально, пока я не начал импортировать новый адаптивный CSS и элементы на свой существующий веб-сайт.

Я должен был начать добавлять! Важный почти для каждой строки CSS, содержащейся в запросе @media. Затем я изменил порядок загрузки своих CSS-файлов и переместил файл под названием «отзывчивый» вниз по списку, чтобы он был последним загруженным, а затем все стало работать нормально, и мне больше не нужно было использовать оператор! Важное после строк CSS.

Я удалил вашу подпись из этого и другого поста. Пожалуйста, просмотритецентр помощ, особенно раздел о саморекламе, а такжеэта страниц. Ссылки на ваш собственный сайт идут в вашем профиле, а не в ваших сообщениях. Martijn Pieters♦
Понижающие голоса в этом и другом посте почти наверняка связаны со спам-флагами; с правками, которые, вероятно, прекратятся. Если модератор сочтет целесообразным отклонить спам-флаги, отрицательные голоса будут автоматически отменены. Martijn Pieters♦

Похожие вопросы