Настройка точек останова для соответствия размеру экрана с помощью CSS @media

Я устанавливаю точки останова в css, используя '@media only screen и (max-width: 500px)'.

Когда я настраиваю его на изменение цвета при достижении точки останова, это работает:

@media only screen and (max-width: 500px) {#container{color:black;}}

Когда я изменяю размер браузера, div контейнера становится черным, однако, когда я устанавливаю точку останова для изменения поля div, точка останова не срабатывает.

Поэтому, когда я задаю запрос:

@media only screen and (max-width: 500px) {#container{margin-left: 0px;}}

ничего не меняется, когда размер экрана изменяется точно так же, как при изменении размера при тестировании на изменение цвета.

основной файл CSS устанавливает #container в поле margin-left; 18%, и когда он изменяется вручную на 0px, он смещает документ полностью влево от области просмотра

Я пробовал разные стили и HTML-элементы, но изменения цвета кажутся очень надежными, они работают практически в любой комбинации, но изменение размеров div или изменение положения, похоже, не работает вообще. Почему это может быть?

Ответ:

Я поместил свой запрос @media в начало моего CSS-файла, когда я переместил его к основанию CSS-файла, размер которого теперь изменился. Однако остается вопрос, почему он изменил цвет в начале файла, но не изменил размер?

Источник

3 ответа

Решение

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

Смотрите это, например:

http://jsfiddle.net/Q55MC/

#container {background: blue; margin: 50px; width: 200px; height: 200px;}

@media only screen and (max-width: 500px) {
    #container{background:black; margin: 0px;}
}

Попробуйте создать демо, чтобы у людей было лучшее представление о том, чего вы хотите достичь.

Источник

Похоже, что стиль 18% имеет приоритет.

Попробуйте переопределить это с этим:

экран @media only и (max-width: 500px) {#container{margin-left: 0px! важный;}}

Источник

Поможет ли мета-объявление @viewport?

Измените размер своей страницы с помощью CSS-декларации @viewport

знать, что этот пост использует @-viewport когда это должно быть просто @viewport

Источник
Другие вопросы по тегам