Как работает CSS Media Query?

Question

Допустим, у меня есть 2 разных файла CSS (desktop.css и ipad.css), которые применяются к одной и той же HTML-странице.

У меня есть псевдо-div, определенный следующим образом ( в desktop.css )

div.someClass{float:left;overflow:hidden;height:100px}

Теперь, скажем, при меньшем размере экрана (пользователь изменяет размер браузера до размера iPad) и iPad.css применяется. Поэтому мой вопрос заключается в том, останется ли эффект свойств, определенных в desktop.css, все еще ИЛИ, если он полностью уничтожен и будут применены только свойства ipad.css ..

Как и в ipad.css, если я хочу иметь переполнение: видимое (то есть значение переполнения по умолчанию), нужно ли мне явно указывать это ИЛИ, если я просто определю следующее в ipad.css

div.someClass{float:left;height:100px}

это автоматически применило бы переполнение по умолчанию: видимое значение к div?

Answer 1

@ testndtv;Вы должны написать overflow:visible в своем ipad.css, потому что media query обнаруживает только screen resolution и затем активирует css в соответствии с screen resolution.Вот почему мы можем только override наше ipad.css свойство из активируемого.

Итак, для ipad.css напишите так:

div.someClass{float:left;overflow:visible;height:100px}

Answer 2

C в CSS для Каскадное . Стили ipad.css (при условии, что они загружены после и имеют более высокую специфичность) будут иметь более высокий приоритет и будут применяться.

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

Answer 3

Это зависит от того, как вы размещаете свои запросы.Вы можете сделать оба.