Css @media tag действующий странный

Я пытаюсь создать дизайн с тегом @media при изменении размера окна браузера.Css @media tag действующий странный

Обычное окно:

normal

Измененный размер окна:

resized

(третья история (один справа) обращается в нуль, и элементы получают меньше)

проблемы когда я изменяю его размер до первоначального размера, я получаю:

resized_back_to_original

Код:

@media screen and (max-width: 998px){ 
    ... 
    .person_company{ 
     float: none !important; 
    } 
    ... 
}

.person_company эти изображения:

person_company

Я не отправлял весь @media код, потому что если я удалить .person_company стиль, эта проблема не происходит. Поэтому я предполагаю, что это проблема.

Кроме того, обратите внимание, что до изменения размера, хрома инспектировать элемент показывает float: right на этом элементе, и при изменении размеров, он показывает float: none, и при увеличении назад он показывает float: right. Так что @media действует правильно, я думаю. Итак, что вызывает проблему?

источник

2015-05-02 Alaa M.

попробуйте использовать (мин) для точек останова, например (@media (min-width: 998px) {...) – Tasos

Вы пробовали прокрутку страницы вниз, чтобы проверить, отсутствует ли поле здесь? Когда вы удаляете float, он может оказаться ниже плавающих элементов. –

@SalmanA Нет недостающей коробки. Пожалуйста, прочитайте объяснение под второй картиной (я хочу, чтобы 3-й ящик исчез). –

В Chrome есть ошибка, которая вызывает проблемы с положением при изменении размера окна. Когда это произойдет, попробуйте просто обновить страницу (F5) в неправильной позиции. Затем он должен отображаться нормально.

Изменение размера ошибки. :)

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

источник

2015-05-02 18:27:46

Хм ... Интересно. Это действительно происходит только в хроме. (И да, освежающий исправляет это ...) И вы можете видеть в моем коде, что точка останова находится на ** 998px **. –

Эта ошибка возникает, если у вас есть !important правил для float, а иногда и display. Это связано с тем, что !important останется активным, даже если размер экрана был изменен снова. Пока что мало что можно сделать, я обычно пытаюсь найти другой способ позиционирования моих элементов. Это не похоже на то, что пользователь будет сидеть и изменять размер окна вверх и вниз и т. Д., Но если вас действительно беспокоит эта ошибка. Найдите другой способ определения местоположения :)

источник

2015-05-02 18:32:37 Chrillewoodz

Но, как я уже сказал, хром ** проверяет элемент ** показывает 'float: right' на этом элементе после того, как я изменил размер до нормального значения. Это означает, что '! Important' не остался активным –

Css @media tag действующий странный

ответ

Смежные вопросы