Zapytania medialne w CSS | Wyjaśnione
Ten zapis będzie przedstawił kompleksowy przewodnik dla zapytań Media CSS i zostanie on zorganizowany w następujący sposób:
- Jakie są zapytania medialne CSS?
- Podstawowa składnia
- Dlaczego używane są zapytania medialne
- Rodzaje zapytań medialnych
- Praktyczne wdrożenie zapytań medialnych CSS
A więc zacznijmy!
Jakie są zapytania CSS mediów?
Zapytanie multimediów pozwala nam tworzyć różne układy w zależności od rozmiaru wyświetlania. Na przykład zapytania medialne mogą wykryć, czy użytkownik używa myszy, czy ekran dotykowy itp.
Poniższa lista przedstawia różne rzeczy, które sprawdza zapytanie CSS Media:
- Wysokość i szerokość rzutni.
- Wysokość i szerokość urządzenia.
- Rezolucja.
- Orientacja urządzenia i.mi. portret lub krajobraz.
Podsumowując, możemy powiedzieć, że zapytania medialne są bardzo przydatne w wykrywaniu różnych aspektów związanych ze środowiskiem, w którym witryna działa.
Podstawowa składnia
Podstawowa składnia zapytań medialnych składa się z wielu rzeczy, takich jak typ mediów (i.mi. ekran, wszystkie itp.), pojedyncze lub wiele wyrażeń. Zapytanie medialne zawsze będzie inicjowane z „@Media”. „„typ mediów”Można połączyć z Wyrażenie (y) Korzystanie z operatora logicznego jest jednak opcjonalne:
@Media MediaType i (wyrażenie/wyrażenia)/ * Reguły kodu/CSS */
Zapytanie multimedialne w CSS jest operacją logiczną, dlatego ilekroć stanie się to prawdą, powiązane CSS zostanie zastosowane do elementu docelowego.
Dlaczego używane są zapytania medialne
Zapytania o media służą do zapewnienia dostosowanego wyglądu na stronie internetowej dla różnych urządzeń, takich jak laptopy, komputery stacjonarne, telefony komórkowe itp. Możemy więc powiedzieć, że zapytania medialne są używane do tworzenia nowych zasad CSS lub do zastąpienia istniejących CSS w celu przedstawienia responsywnej strony internetowej.
Rodzaje zapytań medialnych
Istnieją cztery rodzaje zapytań medialnych CSS, które można użyć do różnych celów, jak wymieniono poniżej:
| Typ mediów | Opis |
|---|---|
| Wszystko | Używane dla wszystkich typów mediów I.mi. ekran, druk, mowa |
| ekran | Używane do ekranów, takich jak telefony komórkowe, laptopy itp. |
| wydrukować | Używane tylko do drukarek. |
| przemówienie | Używane do czytania ekranu |
Praktyczne wdrożenie zapytań medialnych CSS
Na razie mamy podstawowe wyobrażenie o tym, czym jest zapytanie medialne, jego składnia, dlaczego powinniśmy z niego korzystać i jakie są różne rodzaje zapytań medialnych CSS. A teraz dla głębokiego zrozumienia wdrożymy te teoretyczne pojęcia w praktyczny scenariusz.
Przykład
W tym przykładzie utworzymy trzy akapity i nagłówek, i ustawimy kolor tła i wyrównanie tła ciała jako jasny szary I Centrum odpowiednio. Ponadto wykorzystamy zapytania multimedialne do modyfikacji koloru tła i wyrównania tekstu niebieskie niebo I lewy które wejdą w działanie, gdy rozmiar ekranu będzie szerszy lub równy 360 pikseli:
Zapytania medialne
Kolor tła ciała jest jasnoszary
Kolor tła zostanie zmieniony z jasnoszarego na niebo niebieski, jeśli rzutek jest szerszy niż 360 pikseli
Poniższy fragment podbity pokaże działanie zapytań CSS Media:
Z wyjścia wyraźnie wynika, że początkowo kolor tła był jasnoszary, a tekst wyrównany w środku, ponieważ w tym czasie szerokość ekranu była mniejsza niż 360. Jednak kiedy zmieniliśmy (większą niż 360) szerokość ekranu, kolor tła i wyrównanie tekstu zostały zmodyfikowane do koloru niebieskiego i lewego wyrównania.
Wniosek
Zapytania o media służą do dostosowania prezentacji witryny zgodnie z rozmiarem ekranu użytkownika. Korzystając z zapytań multimedialnych, możemy pokazać różne znaczniki w zależności od typu urządzenia (telefon komórkowy, tablet, komputer). W CSS zapytania o media są operacją logiczną, a zatem za każdym razem, gdy stanie się to prawdą, powiązane CSS zostaną zastosowane do elementu docelowego. Ten zapis przedstawia szczegółowe zrozumienie zapytań mediów CSS i dla lepszego zrozumienia, zapewnia fragmenty kodu wraz z odpowiednimi wyjściami.