Вопрос Почему css @media не работает?

[stalker12]

@media only screen and (min-width: 1900px) {

#contentContainer {

width: 1900px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1800px) {

#contentContainer {

width: 1800px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1700px) {

#contentContainer {

width: 1700px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1600px) {

#contentContainer {

width: 1600px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1500px) {

#contentContainer {

width: 1500px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1400px) {

#contentContainer {

width: 1400px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1300px) {

#contentContainer {

width: 1300px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1200px) {

#contentContainer {

width: 1200px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1100px) {

#contentContainer {

width: 1100px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 1000px) {

#contentContainer {

width: 1000px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 900px) {

#contentContainer {

width: 900px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 800px) {

#contentContainer {

width: 800px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 7000px) {

#contentContainer {

width: 700px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 600px) {

#contentContainer {

width: 600px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 500px) {

#contentContainer {

width: 500px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 400px) {

#contentContainer {

width: 400px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 300px) {

#contentContainer {

width: 300px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 200px) {

#contentContainer {

width: 200px;

border: 5px black solid;

overflow: hidden;

}

}



@media only screen and (min-width: 100px) {

#contentContainer {

width: 100px;

border: 5px black solid;

overflow: hidden;

}

}

 

[TDR]

Потому, что ты перечислил все правила не в том порядке.

Правило min-width: 100px перекрывает любое правило, размещённое выше - т.к. соответствует ЛЮБОЙ ширине окна от 100px и ДО БЕСКОНЕЧНОСТИ.

min-width: 100px означает: ширина окна >= 100px.
max-width: 100px означает: ширина окна <= 100px.

Правила min-width должны перечисляться от минимального значения сверху к максимальному значению снизу. Только тогда они будут нормально работать.

А вот правила max-width как раз должны перечисляться от максимального значения сверху к минимальному значению снизу.

А ещё у тебя там 7000px вместо 700px.

 

[Chaka]

7000px исправь на 700px

 

[1985AndryxA1985]

У тебя не правильная логика. У тебя медиа запрос самый первый срабатывает при ширине экрана более 100px. Естественно он будет срабатывать всегда. Замени min-width на max-width. Лично я именно их всегда использую. Ну и 7000px многовато

 

[Azuat]

я вижу что нет открывающей скобки, если точнее, то это невалидный html / xml-код