#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я пытаюсь понять, как медиа-запросы работают в css. Я ищу загрузочный файл и копирую .container запросы @media в пустой css и добавляю цвета, чтобы увидеть его в реальном времени:
file.css:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color:green;
}
@media (min-width: 768px) {
.container {width: 750px;background-color:red;}
}
@media (min-width: 992px) {
.container {width: 970px;background-color:blue;}
}
@media (min-width: 1200px ) {
.container {width: 1170px;background-color:red;}
}
index.html
<div class="container">Hello</div>
Когда я запускаю его и изменяю размер окна браузера, div меняет цвета, но никогда не меняется на красный (1200 пикселей).
Почему это происходит?
Редактировать :
В Firefox работает нормально, проблема появляется в Chrome.
Комментарии:
1. Здесь все работает нормально jsfiddle.net/hx3y2 . Возможно, в вашем случае уже есть еще один медиа-запрос с такой же шириной 1200 и перезаписывающий эти стили. Попробуйте использовать здесь ключевое слово «!important».
2. Этот код работает должным образом. Вы пробовали на экране 1200 пикселей?..
3. Я тестировал в Chrome и потерпел неудачу, в Firefox работает нормально