Jak mogę wykryć, który wymiar okna jest większy tylko za pomocą zapytania o media CSS? - css, zapytania o media

Czy ktoś wie, jak utworzyć zapytanie o media, które zachowuje się w ten sposób:

Ekran @media i (szerokość Lepszy niż wysokość){}

lub

Ekran @media i (wysokość mniej niż szerokość){}

Na co podano w specyfikacja składni nie jest możliwe użycie wartości "media_feature" jako wartości. Czy istnieje jakieś obejście BEZ korzystania z JavaScript? Najbliższą rzeczą, jaką mogłem uzyskać, było użycie współczynnika proporcji, ale nie był on funkcjonalny.

Dzięki.

Odpowiedzi:

3 dla odpowiedzi № 1

Możesz użyć zapytania o media orientacji:

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

Od Specyfikacja zapytań o media W3C:

Funkcja multimedialna „orientacja” to „portret”, gdy wartość funkcji „wysokość” jest większa lub równa wartości funkcji „szerokość”. W przeciwnym razie „orientacja” to „krajobraz”.

Zauważ jednak, że zazwyczaj bardziej sensowne jest martwienie się o rzeczywistą szerokość niż orientacja, zobacz to artykuł o QuirksBlog dla szczegółów.

---

2 dla odpowiedzi nr 2

Odpowiedź @ N3dst4 działa tylko wtedy, gdy twoje porównanie wynosi 1: 1. Jeśli szukasz czegoś innego, możesz użyć 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;
}
}

Użyłem powyższego fragmentu, aby poprawnie skalować obraz tła 4: 3.

---

1 dla odpowiedzi nr 3

Drugie trafienie w Google: http://css-tricks.com/6731-css-media-queries/

Pierwsza część przykładu na tej stronie:

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

Za pomocą max-width lub max-height jest taki sam jak „wysokość mniejsza niż” itd.

To samo dotyczy wysokości.

---