СМИ не работает, используя классы для изменения свойств экрана

Question

У меня есть простой запрос медиа, который не работает ... вот мой код:

В внешней таблице стилей:

@media screen and (max-width: 768px) { 
    .logo_1000{display:none !important;} 
    .logo_320{display:visible !important;} 
} 

Далее в HTML моего файла заголовка PHP у меня есть два набора логотип HTML, каждый в своей собственной обертке с одним из классов выше:

<div class="logo_1000" style="margin: 0px auto 0px; width: 1000px; height:100px;"> 
    <div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-1000x100.png" width="1000" height="100" /></div> 
</div> 
<div class="logo_320" style="display:none; margin: 0px auto 0px; width: 100%; height:100px;"> 
    <div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-320-100.png" width="320" height="100" /></div> 
</div> 

Answer 1

Это не работает, потому что браузер будет всегда использовать встроенный css по css, определенному b y "" над внешними стилями. Может быть, вы хотите использовать Chrome DevTools (F12), они сделают вашу жизнь намного проще

Answer 2

есть значение display не является правильным, нет такой вещи, как visible, это должно быть что-то из списка определенный для свойства, см. http://www.w3schools.com/cssref/pr_class_display.asp для допустимых значений.

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

Answer 3

Вы злоупотребляете отображения свойства CSS. Свойство display указывает тип поля, используемого для элемента HTML. Нет такой вещи, как display: visible;. Посмотрите в here

• рядный Значение по умолчанию. Отображает элемент в качестве встроенного элемента, как промежуток
• блок Отображает элемент в качестве элемента блока, как р
• прогибается отображает элемент в виде гибкого контейнера на уровне блоков. Новое в CSS3
• встроенный блок Отображает элемент как контейнер блока уровня. Внутренняя часть этого блока отформатирована как блок-уровень, а сам элемент отформатирован как ящик встроенного уровня.
• inline-flex Отображает элемент как гибкий контейнер линейного уровня.Новое в CSS3
• рядный таблица Элемент отображается в виде таблицы инлайн-
• элемента списка Пусть элемент ведет себя как литий элемент
• вводного Отображает элемент или как блок или встроенный в зависимости от контекста
• таблица Пусть элемент ведет себя как элемент таблицы
• стол-заголовка Пусть эль лор вести себя как элемент заголовка
• таблицы групп столбцов Пусть элемент ведет себя как COLGROUP элемент
• таблицы заголовков группы Пусть элемент ведет себя как THEAD элемент
• стол-footer- группа Пусть элемент ведет себя как элемент TFOOT
• таблицы строки группы Пусть элемент ведет себя как элемент TBODY
• таблица клетки Пусть элемент ведет себя как тд элемент
• таблица-столбец Пусть элемент ведет себя как Col элемент
• таблица строки Пусть элемент ведет себя как тр элемент
• ни элемент будет не отображается вообще (не влияет на макет)
• начальный Устанавливает это свойство по умолчанию. Read about initial
• inherit Наследует это свойство от его родительского элемента.

Пример CSS:

@media only screen and (max-width: 768px) { 
.logo_1000{display:none !important;} 
.logo_320{display:block !important;} 
} 

Answer 4

РЕШИТЬ:

Проблема была hiarchy правил каскадных. Внешняя таблица стилей, в которой проживал медиа-запрос, не могла перегрузить свойства отображения, установленные внутри документа HTML. Решением было перемещение внутреннего css во внешнюю таблицу стилей, а затем отображение и скрытие элементов в запросе на медиа. Как так:

/****LOGO*******************/ 

/Фикс для мобильных телефонов/ /***************************/

.logo_1000 {дисплей: встроенный блок;}/* Показать по умолчанию */

в.logo_320 {дисплей: нет;}/* * Скрыть/

@media экран мобильного и (макс-ширина: 768px) {/ * теперь мы на мобильный, поменять логотипы */

.logo_1000{display:none !important;} 
.logo_320{display:inline-block !important;} 

}