rtl.css и media queries

215

03 декабря 2017, 11:21

Есть элемент с классом .block.

Для него прописаны правила в трёх местах.

В style.css:

.block { float: left; }

В rtl.css:

.block { float: right; }

В media.css:

@media screen and (max-width: 800px) {
    .block { float: none; }
}

Почему для rtl-версии сайта медиа-запрос не выполняется?

В исходном коде видно, что файл rtl.css подгружается последним. Но разве медиа-запросы не имеют приоритет? Помогите, пожалуйста, разобраться.

Answer 1

Медиа-запросы не имеют приоритета. Вот вам пример. Раскройте сниппет во весь экран и подвигайте окно браузера.

Нижний .block2 меняет цвет, а верхний .block - нет. Потому что медиа-запрос для верхнего блока перекрыт следующим правилом, которое гласит: фон всегда зеленый.

Так что если хотите, чтобы медиа-запросы работали, размещайте их ниже по тексту вашего файла css.

.block, 
.block2 { 
  width: 100%; 
  height: 50px; 
  border: 1px solid white; 
} 
 
@media screen and (max-width: 650px) { 
  .block { 
    background: red; 
  } 
} 
 
.block { 
  background: green; 
} 
 
.block2 { 
  background: green; 
} 
 
@media screen and (max-width: 650px) { 
  .block2 { 
    background: red; 
  } 
}

<div class="block"></div> 
<div class="block2"></div>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Golang mysql-driver: invalid connection

Почему у меня не хочет подключаться к серверу mysql (стоит на локальном хосте: Denwer)В Apache прописаны конфигурации: $&{ip:-127

583

MySQL

Проблемы после установки DataGrip (JetBrains)

После установки DataGrip у меня постоянно пустой экран при постоянном создании нового проектаНе знаю как решить эту проблему

238

MySQL

Как в mysql изменить тип поля

Надо сделать поле чтобы можно записывать в него числа типа 655, а сейчас можно только целые числа писать

269

MySQL

Как создать гибкую схему таблиц для хранения сообщений из разных чатов?

Помогите пожалуйста разобраться в следующей ситуации:

305