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

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?

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:

• http://www.w3.org/TR/css3-mediaqueries/

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.

http://www.css3.info/preview/media-queries/

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