@media запросов в CSS

Question

У меня есть следующий CSS для выравнивания содержимого страницы в разных размерах браузера. Однако или по какой-то причине ему не нравится первый оператор @media, другими словами изменение чего-либо в нем ничего не делает с макетом. Я использую http://quirktools.com/screenfly/ для проверки макета.
Изменение последовательности инструкций также испортит ситуацию. Я потерял

Ваша помощь очень ценится

Благодаря

@media (min-width: 500px) and (max-width: 820px) { 
CSS HERE 
} 
@media (min-width: 830px) and (max-width: 1025px) { 
CSS HERE 
} 
@media (min-width: 1026px) and (max-width: 1580px) { 
CSS HERE 
} 
@media (min-width: 1590px) and (max-width: 2000px) { 
CSS HERE 
} 

Answer 1

Сначала вы хотите определить размер экрана для чего-либо большего, чем оттуда, вы создаете свои медиа-запросы для размеров между ними.

Вот пример.

/* Large desktop */ 
@media only screen and (min-width :75.000em) { 
    .test { 
     display: none; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media only screen and (min-width :61.250em) and (max-width:74.938em) { 
    .test { 
     display: block; 
     color: #FF0; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media only screen and (min-width :48.000em) and (max-width:61.188em) { 
    .test { 
     display: none; 
    } 
} 

/* Landscape phone to portrait tablet */ 
@media only screen and (min-width :30.063em) and (max-width :47.938em) { 
    .test { 
     display: none; 
    } 
} 

/* portrait phones and down */ 
@media only screen and (max-width :30.000em) { 
    .test { 
     display: block; 
     color: #FF0; 
    } 
} 

Answer 2

Вы должны установить первый сказать «что-нибудь меньше, чем (max-width: 829px), сделать это»

Для EG:

@media (max-width: 829px) { 
.bg {background-color:blue;} 
} 
@media (min-width: 830px) and (max-width: 1025px) { 
.bg {background-color:red;} 
} 
@media (min-width: 1026px) and (max-width: 1580px) { 
.bg {background-color:green;} 
} 
@media (min-width: 1590px) and (max-width: 2000px) { 
.bg {background-color:yellow;} 
} 

Посмотрите на это Plunker - Я добавил класс bg в тело, чтобы вы могли видеть цвет изменения фона при изменении ширины рамки.

Вы можете упростить свои запросы тоже, говоря:

@media (max-width: 829px) { 
.bg {background-color:blue;} 
} 
@media (min-width: 830px){ 
.bg {background-color:red;} 
} 
@media (min-width: 1026px) { 
.bg {background-color:green;} 
} 
@media (min-width: 1590px) { 
.bg {background-color:yellow;} 
} 

Answer 3

<meta name="viewport" content="width=device-width initial-scale=1" /> 

Включить выше кода в HTML для запуска медиа-запрос.