Почему эта менее спецификация не может применить фон к Div? ⇐ Html

[Anonymous]

Моя цель состоит в том, чтобы установить фон Div of Class Untermate-bar < /code> на красный, когда страница загружается в iPhone или аналогичное мобильное устройство.

Код: Выделить всё

@mandy: #ff0000;

// extra small
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);

.hidden {
display: none;
}

// This does not work too
// .active .content .notice-bar {
//    background: @mandy;
// }

.active .content {
@media (max-width: @screen-xs-max) {
background: @mandy;
.header {
display: none;
}
.notice-bar {
display: block;
}
.view-switcher a {
color: white;
}
}

}
< /code>

И вот мой HTML -файл < /p>









Expect to be red background

Expect to be hidden

Hidden




< /code>

Я ожидаю, что Div of Class Header notement-bar < /code> будет иметь красный цвет фона при просмотре на iPhone или других подобных смартфонах, но это не так. На самом деле, даже если я установил это явно, это тоже не работает. < /p>

.active .content .notice-bar {
background: @mandy;
}
< /code>

Что я пропустил? Однако я все еще не могу видеть такой же эффект в мобильном сафари. Вот новый меньший < /code> code < /p>

   .active.content {
@media (max-width: @screen-xs-max) {
< /code>

Вот снимки экрана < /p>

 < /p>

 

Мой основной - сделать меньше 

Code работает с .

Подробнее здесь: https://stackoverflow.com/questions/277 ... to-the-div