Co oznacza ekran @media i (maksymalna szerokość: 1024px) w CSS?


245

Znalazłem ten fragment kodu w odziedziczonym przeze mnie pliku CSS, ale nie mogę tego zrozumieć:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

Co konkretnie dzieje się w pierwszej linii?

Odpowiedzi:


306

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:

  1. @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ć.

  2. 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:


jeśli szerokość mojego ekranu jest większa niż 1200 pikseli, jak określić na ekranie
@media

2
możesz po prostu użyć (min-width: 1200px) zamiast używać max-width, lub możesz po prostu mieć go jako zwykły CSS bez zapytania o media i użyć „max-width”, aby zastąpić to, gdy trafi na mniejsze urządzenie
MintWelsh

Czy istnieje sposób, aby zmienić styl tylko na komputer (w ogóle NIE mobilny) podczas zmiany rozmiaru rzutni? Więc jeśli ręcznie zmieniłem rozmiar przeglądarki na „maks. Szerokość 720px”, użyłby oświadczenia multimedialnego, które wykrywa cię na komputerze stacjonarnym, a nie mobilnym, a teraz masz na przykład poniżej 720px?
wharfdale

@ JordanC26: wygląda na to, że zadajesz pytanie, a do tego chcesz przycisk „Zadaj pytanie” w prawym górnym rogu ekranu. Zanim jednak tego użyjesz, możesz chcieć zdefiniować, co rozumiesz przez „komputer” i „telefon”. Czy Microsoft Surface jest urządzeniem mobilnym czy stacjonarnym? Czemu? Co z przyszłymi urządzeniami, które nie zostały jeszcze wynalezione?
Paul D. Waite


10

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 ..


3
Nie założyłbym, że on o tym wie.
jcolebrand

6

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 .



1

Oznacza to, że jeśli rozmiar ekranu wynosi 1024, wówczas stosuje się tylko poniżej reguł CSS.


1

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.


0

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;
    }
}

0

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ęść.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.