Почему этот медиа-запрос flexbox не работает? - PullRequest
Новая
       11

Почему этот медиа-запрос flexbox не работает?

0 голосов
/ 06 июня 2018

Новичок в этом, будьте добры :) (и простите за небрежный код) Я выполнил поиск и уже нашел здесь помощь.Помогал переделать магазин ebay на работе.Попытка заставить этот медиазапрос работать с flexbox.Из того, что я понимаю, медиа-запрос не может быть использован встроенным, но может быть использован внутри тегов стиля внутри головы без необходимости ссылаться на внешний CSS.

Вот кодекс макета.Я даже протестировал другие медиа-запросы (там есть один сейчас), и они работают.Но я хочу, чтобы гибкие элементы обернулись до полной ширины 100%, как только размер экрана уменьшится, и это не будет работать.

Я знаю, что нацеливаю правильное правило, потому что оно было протестировано без запроса: 

.flex-item {
   width: 100%;
}

, и оно делает то, что я хочу, чтобы ... Как получается запрос цвета фонаработает внутри HTML, а гибкий запрос - нет?

Я уверен, что это что-то глупое.

https://codepen.io/pmendola/pen/MXjwza

(для простоты я удалил часть кода)- есть только несколько гибких правил, прямо в верхней части CSS)

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Это проблема специфичности.Медиа-запросы не добавляют специфичности к запросу, поэтому 

@media screen and (max-width: 480px) {
    .flex-item { ...

и 

.flex-item { ...

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

Это можно исправить, поместив правило медиазапроса ниже в стилях, чем там, где объявлено правило, которого нет в медиазапросе.Думайте об этом как о ваших специфических стилях СМИ, переопределяющих значения по умолчанию.Как таковые, они должны прийти позже в стилях.

0 голосов
/ 06 июня 2018

Добавление !important к гибкому определению исправит это для вас. 

@media screen and (max-width: 480px) {
  body {
    background-color: yellow;
    }
    .flex-item {
      width: 100% !important;
      margin: 0 auto;
    }     
}

что это значит?

Вам нужен более конкретный стиль, который определен только для мобильных устройствэкраны и прикреплен к элементу. Подробнее

...