Projektując responsywną stronę internetową, programista chce zmienić strukturę układu internetowego na podstawie urządzenia za pomocą tego. CSS pozwala użytkownikom wykonywać to zadanie za pomocą reguły @Media, która wykorzystuje zapytania medialne do zmiany wyglądu strony odpowiadającej typowi urządzenia. Aby zrozumieć, co to za zasada, przeczytaj następujący post. Badani podkreślone w poście są następujące.

1. @Media Reguła
2. Składnia zasady @Media
3. Rodzaje mediów CSS
4. Rodzaje funkcji medialnych

@Media Reguła

W celu zmiany wyglądu strony internetowej na podstawie urządzenia lub nośnika, które ją wyświetla, używana jest reguła @Media. Ta reguła wykorzystuje zapytania medialne do wykonywania wspomnianego zadania. Ta zasada okazuje się bardzo przydatna podczas opracowywania responsywnej strony internetowej.

Składnia zasady @Media

Ma następującą składnię.

Wyjaśnione słowa kluczowe

nie: Odwraca semantykę zapytania medialnego.

tylko: Zapobiega wdrażaniu starych wersji przeglądarki.

I: Łączy typ mediów z pewną funkcją multimediów.

Typy Media CSS

Istnieje w sumie cztery typy mediów, które podaliśmy poniżej.

Wszystko

Ma to zastosowanie do wszelkiego rodzaju urządzeń medialnych.

wydrukować

To zapytanie jest specjalnie używane do drukarek.

ekran

Służy do ekranów różnych typów urządzeń, takich jak komputery, laptopy, telefony komórkowe itp.

przemówienie

To zapytanie jest szczególnie używane dla czytników ekranu.

Rodzaje funkcji medialnych

Opisaliśmy tutaj niektóre funkcje mediów.

1. dowolna hole

Ta funkcja została uwzględniona w zapytaniach Media Level 4 i określa, że ​​jeśli jakikolwiek podany mechanizm wejściowy pozwala użytkownikowi unosić się na elementach.

dowolny punkt

Zostało to również uwzględnione w zapytaniach dotyczących mediów na poziomie 4 i stwierdza, że ​​jeśli jakikolwiek podany mechanizm wejściowy jest urządzeniem wskazującym, a jeśli tak, to jak precyzyjne jest to?

Aspect-Ratio

Ta funkcja określa stosunek szerokości rzutni i jej wysokości.

kolor

Ta funkcja określa komponenty kolorów urządzeń wyjściowych.

Kolor-gamut

To określa zakres kolorów, które będą obsługiwane przez urządzenia wyjściowe.

indeks kolorowy

Stwierdza, że ​​liczba kolorów może wyświetlić dane urządzenie.

siatka

Rozmiar kolumn i wierszy jest określony przez funkcję siatki.

wysokość

To określa wysokość rzutni.

unosić się

Aby umożliwić użytkownikom nachylenie się nad elementami HTML, funkcja zawisu jest używana.

odwrócone kolory

To określa, czy urządzenie wyjściowe odwraca kolory.

poziom światła

Jak sama nazwa wskazuje, określa poziom światła.

MAX-ASPECT-RATIO

Maksymalny stosunek szerokości i wysokości jest określony przez tę funkcję.

Maksymalny kolor

Najwięcej bitów na jednostki kolorów urządzeń wyjściowych jest określona przez tę funkcję.

MAX-Color-Index

Ta funkcja stwierdza maksymalne kolory, które może wyświetlić urządzenie.

maksymalna wysokość

Ta funkcja określa maksymalną wysokość przeglądarki.

Max-Monochrom

Najwięcej bitów na jednostki kolorów monochromatycznego narzędzia jest podana przez tę funkcję.

rozdzielczość min

Minimalna rozdzielczość urządzenia wyjściowego jest określona przez funkcję rozdzielczości min.

Min szerokość

Ta funkcja określa minimalną szerokość przeglądarki.

monochromia

Ta funkcja stwierdza maksymalną liczbę bitów na kolorowy element urządzenia monochromatycznego.

orientacja

Określa, czy orientacja rzutni jest portretem czy krajobrazem.

przepełnienie blok

Obsługuje scenariusze, w których treść strony internetowej przepełnia rzutek.

przepełnienie

Obsługuje scenariusze, w których treść strony internetowej przepełnia wirtuj na osi wbudowanej.

wskaźnik

Fundamentalny mechanizm wejściowy do wskazywania urządzeń.

rezolucja

Stwierdza rozdzielczość urządzenia (w DPI lub DPCM)

skanowanie

Skanuje urządzenia wyjściowe.

Skrypty

Sprawdza, czy jakieś skrypty, takie jak JavaScript, są dostępne, czy nie.

aktualizacja

Szybko aktualizuje urządzenia wyjściowe.

szerokość

Szerokość rzutni jest zdefiniowana przez tę funkcję.

Poniżej przedstawiliśmy ci przykład, abyś mógł lepiej zrozumieć zasadę @Media.

Przykład

Poniższy przykład pokazuje zasadę @Media.

Html

Reguła CSS @Media

W celu zmiany wyglądu strony internetowej na podstawie urządzenia lub nośnika, które ją wyświetla, używana jest reguła @Media. Ta reguła wykorzystuje zapytania medialne do wykonywania wspomnianego zadania. Ta zasada okazuje się bardzo przydatna podczas opracowywania responsywnej strony internetowej.

Tutaj zdefiniowaliśmy dwa elementy, które są

I

. Zastosujemy pewne zasady mediów na tych elementach.

CSS

H1, p
Font-family: „Times New Roman”, Times, Serif;
Rozmiar czcionki: 16px;
Styl czcionki: normalny;

@Media ekran i (min-szerokość: 720px)
P
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;
Rozmiar czcionki: 25px;
Styl czcionki: Kursywa;

W powyższym kodzie stwierdziliśmy, że zarówno nagłówek, jak i akapit będą miały rodzinę czcionki Verdana, rozmiar czcionki 25px i styl czcionki kursywnej, jeśli minimalna szerokość ekranu urządzenia wynosi 720px lub szersza. Jeśli jednak szerokość ekranu jest mniejsza niż 720px, rodzina czcionek będzie czasem nowym rzymskim, rozmiaru czcionki 16px i czcionki.

Wyjście

Gdy szerokość ekranu jest 720px lub szersza.

Gdy szerokość ekranu jest mniejsza niż 720px.

Zasada @Media została pomyślnie wdrożona.

Wniosek

Reguła @Media służy do zmiany wyglądu strony internetowej na podstawie urządzenia lub nośnika, które ją wyświetla. Składnia reguły stwierdza, że ​​typ mediów powinien być zdefiniowany wraz z niektórymi funkcjami multimediów i skorzystać z niektórych operatorów. Ponadto istnieją cztery typy; Wszystkie, ekran, druk i mowa. Ponadto istnieje wiele funkcji mediów, takich jak szerokość, monochromatyka, wysokość, przepełnienie itp. Ten post głęboko wyjaśnia zasadę @Media wraz z jej składnią, typami mediów i funkcjami medialnymi.