Запросы мультимедиа: проверьте минимальную высоту и минимальную ширину?

Я пытаюсь изменить CSS на своей странице на основе минимальной и минимальной ширины браузера, поэтому я использую это:

@media (min-height: 500px), (min-width: 580px) {
    /* CSS stuff */
}

Но по какой-то причине это не работает. Я могу проверить минимальную высоту и максимальную ширину (или наоборот) или максимальную высоту и максимальную ширину одновременно, но проверка обоих минимальных значений не работает.

Я что-то делаю неправильно?

Спасибо и приветствуем

Изменить: я должен указать это больше: я хочу, чтобы браузер работал, если минимальная ширина или становится минимальной. Использование оператора and будет работать только в том случае, если оба критерия верны.

Ответ 1

Используйте and вместо запятой, например:

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

Ответ 2

Добавили ли вы следующий метатег в:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Вот REf: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

После этого используйте свой медиа-запрос:

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

Для информации о запросе на медиа вы можете получить дополнительную информацию от http://stephen.io/mediaqueries/ для всех устройств iOS. Если у вас есть какие-либо другие вопросы, дайте мне знать. Даже вы можете получить более полное представление отсюда http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Ответ 3

Использовать медиа-запрос один внутри другого:

@media  screen and  (min-height: 40px)  {
   @media  screen and  (min-width: 50px)  {
    /*enter css here to apply for both condition*/
   }
}