Как определить размер окна больше, просто используя медиа-запрос CSS? - PullRequest
Новая
       6

Как определить размер окна больше, просто используя медиа-запрос CSS?

3 голосов
/ 02 декабря 2011

Кто-нибудь знает, как создать медиа-запрос, который будет вести себя так:

@ мультимедийный экран и (ширина больше высоты) {}

или

@ мультимедийный экран и (высота меньше ширины) {}

Для того, что указано в спецификации синтаксиса , невозможно использовать 'media_feature' в качестве значений. Есть ли обходной путь без использования JavaScript? Самое близкое, что я мог получить, это использовать соотношение сторон, но оно не работало.

Спасибо.

Ответы [ 3 ]

4 голосов
/ 02 декабря 2011

Вы можете использовать медиа-запрос ориентации: 

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Из спецификации W3C медиа-запросов :

Медиа-функция ориентации:Portrait ', когда значение медиа-функции' height 'больше или равно значению медиа-функции' width '.В противном случае «ориентация» - это «ландшафт».

Но обратите внимание, что обычно имеет смысл беспокоиться о фактической ширине, а не об ориентации, см. Эту статью в QuirksBlog для получения подробной информации.

3 голосов
/ 14 июля 2017

@ N3dst4 ответ работает, только если вы сравниваете 1: 1. Если вы ищете что-то еще, вы можете использовать aspect-ratio: 

@media screen and (max-aspect-ratio:4/3) {
  #bg {
    width: auto;
    height: 100%;
  }
}

@media screen and (min-aspect-ratio:4/3) {
  #bg {
    width: 100%;
    height: auto;
  }
}

Я использовал приведенный выше фрагмент для правильного масштабирования фонового изображения 4: 3.

1 голос
/ 02 декабря 2011

Второе попадание в Google: http://css -tricks.com / 6731-css-media-query /

Первая часть примера на этой странице:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Использование max-width или max-height - это то же самое, что "высота меньше чем" и т. Д.

То же самое касается высоты.

...