Odpowiedzi:
To zapytanie medialne. Zapobiega uruchomieniu CSS w nim zawartym, chyba że przeglądarka przejdzie testy, które zawiera.
Testy w tym zapytaniu o media to:
@media screen- Przeglądarka identyfikuje się jako należąca do kategorii „screen”. Z grubsza oznacza to, że przeglądarka uważa się za komputer stacjonarny - w przeciwieństwie do np. Starszej przeglądarki telefonu komórkowego (zwróć uwagę, że iPhone i inne przeglądarki smartfonów, nie identyfikują się jako w kategorii ekranu) lub czytnik ekranu - i że to wyświetlając stronę na ekranie, zamiast ją drukować.
max-width: 1024px- szerokość okna przeglądarki (łącznie z paskiem przewijania) wynosi 1024 piksele lub mniej. ( Piksele CSS, a nie piksele urządzenia .)
Ten drugi test sugeruje, że ma to na celu ograniczenie CSS do iPada, iPhone'a i podobnych urządzeń (ponieważ niektóre starsze przeglądarki nie obsługują max-width zapytań o media, a wiele przeglądarek na komputery jest uruchamianych w rozmiarze większym niż 1024 piksele).
Będzie jednak dotyczyć również okien przeglądarki na pulpicie o szerokości mniejszej niż 1024 piksele, w przeglądarkach obsługujących max-width zapytanie o media.
Oto specyfikacja Media Queries, jest dość czytelna:
Ogranicza zdefiniowane tam style do ekranu (np. Nie drukuj lub inne media), a ponadto ogranicza zakres do rzutni o szerokości 1024 pikseli lub mniejszej.
Mówi: Gdy strona renderuje się na ekranie w rozdzielczości maksymalnie 1024 pikseli szerokości, zastosuj następującą regułę.
Jak już zapewne wiesz, możesz skierować część CSS na typ nośnika, którym może być urządzenie przenośne, ekran, drukarka i tak dalej.
Spojrzeć tutaj szczegóły ..
W moim przypadku chciałem wyśrodkować moje logo na stronie internetowej, gdy przeglądarka ma taką wersję 800pxlub mniej, a następnie zrobiłem to, używając @mediatagu:
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}To zadziałało dla mnie, mam nadzieję, że ktoś uzna to rozwiązanie za przydatne. :) Aby uzyskać więcej informacji, zobacz to .
To zapytania mediów . Umożliwia zastosowanie części reguł CSS tylko do określonych urządzeń w określonej konfiguracji.
Oznacza to, że jeśli rozmiar ekranu wynosi 1024, wówczas stosuje się tylko poniżej reguł CSS.
Jeśli warunek zapytania o media jest prawdziwy, wówczas CSS z tym warunkiem będzie działał. Oznacza to, że CSS w warunku zapytania medialnego będzie miał wpływ na rozmiar piksela, lub jeśli warunek nie powiedzie się, co oznacza, że szerokość urządzenia jest większa niż 1024px, niż Twój CSS nie będzie działać. Ponieważ warunek zapytania medialnego jest fałszywy.
max-width to Twój maksymalny limit CSS do tej szerokości.
Warto również zauważyć, że możesz używać zarówno „em”, jak i „px” - robią to blogi i witryny tekstowe, ponieważ wtedy przeglądarka podejmuje decyzje dotyczące układu bardziej w zależności od treści tekstu.
Na Wordpress twentysixteen chciałem, aby mój slogan wyświetlał się na telefonach komórkowych i komputerach stacjonarnych, więc umieściłem go w stylu motywu potomnego. Cs
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}Celuje w określoną funkcję wykonywania innych kodów ...
Na przykład:
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}powyższy fragment mówi, że jeśli urządzenie, które uruchamia ten program, ma ekran o szerokości 600 pikseli lub mniejszej niż 600 pikseli, w tym przypadku nasz program musi wykonać tę część.