9 zaawansowanych sztuczek CSS dotyczących zapytań o media, które powinieneś wiedzieć

Użyteczne i łatwo dostępne środowisko jest niezbędne dla udanej witryny internetowej. Jeśli Twoi czytelnicy mają pozytywne doświadczenia, są bardziej skłonni do wykonania wezwania do działania, w tym zakupu produktów. Są też bardziej skłonni do powrotu lub polecania Twojej witryny innym. Doświadczenie jest kluczowe.

Zapytania o media oferują różne funkcje CSS, które mogą dostosować Twoją witrynę. Pozwalają dostosować wrażenia każdego użytkownika w oparciu o możliwości jego urządzenia. Dowiedz się, jak zapewnić swoim czytelnikom najlepsze wrażenia, niezależnie od tego, czy używają telefonu, czy dużego monitora biurkowego.

1. Funkcja wskaźnika

ten @zasada mediów posiada funkcję wskaźnika, która umożliwia dostosowanie projektu w oparciu o główne urządzenie wskazujące. Możesz przetestować dostępność i jakość.

Ten wskaźnik funkcja zapytania o media przyjmuje jedną z trzech wartości: brak, gruba lub drobna. ten Żaden wartość ma zastosowanie, gdy nie ma urządzenia wskazującego. ten gruboziarnisty

Wartość ma zastosowanie, gdy główne urządzenie wskazujące ma obniżony poziom dokładności. A cienki wartość ma zastosowanie, gdy główne urządzenie wskazujące ma wysoki poziom dokładności.

Korzystanie z funkcji wskaźnika

Opcje do wyboru: 
 Opcja pierwsza
 Opcja druga

Powyższy kod generuje dwie opcje wejścia radiowego, które będą się różnić w zależności od dokładności podstawowego urządzenia wskazującego komputera.

Komputer wyposażony w dokładne (lub wysokiej jakości) główne urządzenie wskazujące wyświetli następującą stronę internetową:

Komputer z podstawowym urządzeniem o ograniczonej dokładności (lub niskiej jakości) wyświetli następującą stronę internetową:

Urządzenie, które ma główne urządzenie wskazujące o ograniczonym poziomie dokładności, ma większe przyciski opcji. Zapewnia to lepsze wrażenia użytkownika dla takich użytkowników. Dzięki funkcji wskaźnika możesz zapewnić wszystkim użytkownikom przyjemne wrażenia, niezależnie od urządzenia.

2. Funkcja dowolnego wskaźnika

Podobnie jak funkcja wskaźnika, funkcja zapytania o media z dowolnym wskaźnikiem jest przeznaczona dla urządzeń wskazujących. Jednak funkcja dowolnego wskaźnika ocenia każde urządzenie wskazujące komputera. Funkcja dowolnego wskaźnika wykorzystuje również Żaden, gruboziarnisty, oraz cienki wartości.

Korzystanie z funkcji dowolnego wskaźnika

 @media (dowolny wskaźnik: dobrze) {
 wejście[typ="radio"] {
 szerokość: 15px;
 wysokość: 15px;
 promień obramowania: 20px;
 szerokość obramowania: 1px;
 }
 }
@media (dowolny wskaźnik: zgrubny) {
 wejście[typ="radio"] {
 szerokość: 25px;
 wysokość: 25px;
 promień obramowania: 20px;
 szerokość obramowania: 2px;
 }
 }

Możesz po prostu zastąpić powyższy kod sekcją zapytania o media w kodzie w przykładzie funkcji wskaźnika. Powyższy kod renderuje odpowiedni obraz w oparciu o jakość dowolnego urządzenia wskazującego, które może mieć komputer.

3. Funkcja najechania

Funkcja zapytania o media po najechaniu kursorem ocenia, czy główny mechanizm wejściowy urządzenia jest w stanie najechać kursorem na elementy w interfejsie użytkownika.

Korzystanie z funkcji hover

 /* CSS */
 a{
 dekoracja tekstu: brak;
 kolor czarny;
 }
 @media (najedź: najedź) {
 a: najedź {
 kolor niebieski;
 }
 }
 HTML 
 Element łącza

Powyższy kod wyświetli element. Zmieni kolor (z czarnego na niebieski), gdy główny mechanizm wejściowy urządzenia (obsługujący najeżdżanie) unosi się nad nim.

4. Funkcja po najechaniu dowolnym kursorem

ten w dowolnym momencie Zapytanie o media jest skierowane do dowolnego mechanizmu wejściowego, w tym podstawowego mechanizmu wejściowego.

Korzystanie z funkcji dowolnego najechania kursorem

@media (dowolne najechanie: najechanie) {
 a: najedź {
 kolor niebieski;
 }
 }

Powyższe zapytanie o media wywołuje efekt najechania na dowolny mechanizm wejściowy, który jest w stanie najechać kursorem na element.

5. Funkcja rozdzielczości

Funkcja zapytań o media rozdzielczości oblicza liczbę pikseli wyświetlanych przez określone urządzenie. Urządzenie, które wyświetla więcej pikseli na cal, ma lepszą rozdzielczość, ponieważ wyświetla obrazy z większą ilością szczegółów. Ta funkcja może pomóc programiście zdecydować, które urządzenia użytkownicy mogą wyraźniej widzieć elementy w interfejsie użytkownika.

Funkcja rozdzielczości wykorzystuje zakres. Oznacza to, że oprócz korzystania z Rezolucja słowo kluczowe, którego możesz użyć minimalna rozdzielczość oraz maksymalna rozdzielczość. Funkcja rozwiązywania zapytań o media należy do typu danych rozdzielczości. Oznacza to, że rozdzielczość jest mierzona w jednej z trzech jednostek: kropki na cal (dpi), kropki na centymetr (dpcm) lub kropki na piksele (dppx).

Korzystanie z funkcji rozdzielczości

/* CSS */
@media (min-rozdzielczość: 72dpi) {
 P {
 kolor biały;
 kolor tła: niebieski;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elity.

Najniższa rozdzielczość, jaką urządzenie może mieć i nadal wyświetla obrazy o wysokiej jakości, to 72 dpi. Tak więc, jeśli urządzenie ma rozdzielczość 72 dpi lub większą, wyświetli w przeglądarce następujące dane wyjściowe:

6. Funkcja orientacji

Widoczny obszar urządzenia może mieć tylko jedną z dwóch orientacji: portret lub krajobraz. Należy zauważyć, że orientacja rzutni różni się od orientacji urządzenia. Jeśli urządzenie korzysta z klawiatury programowej, jego widoczny obszar może zmienić się z pionowej na poziomą, podczas gdy samo urządzenie jest nadal w pozycji pionowej.

Korzystanie z funkcji orientacji

/* CSS */
 ciało{
 wyświetlacz: elastyczny;
 }
 Sekcja{
 obramowanie: 2px stałe niebieskie;
 wypełnienie: 3px;
 margines: 3px;
 }
 @media (orientacja: pozioma) {
 ciało {
 kierunek ugięcia: rząd;
 }
 }
@media (orientacja: portret) {
 ciało {
 kierunek ugięcia: kolumna;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Powyższy kod zmienia układ strony internetowej w zależności od orientacji urządzenia.

Urządzenie z rzutnią w trybie poziomym wyświetli następującą stronę internetową:

Urządzenie z rzutnią w trybie pionowym wyświetli następującą stronę internetową:

7. Funkcja wysokości

Funkcja zapytań o media wysokości pozwala określić styl CSS na podstawie wysokości widocznego obszaru urządzenia użytkownika. Ta funkcja obsługuje zasięg, więc możesz również użyć minimalna wysokość oraz maksymalna wysokość słowa kluczowe.

Korzystanie z funkcji wysokości

 /* CSS */
 @media (min-wysokość: 360px) {
 P{
 obramowanie: 2px kropkowane pomarańczowoczerwone;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Powyższy kod dostosowuje to, co widzi użytkownik, na podstawie wzrostu jego urządzenia. Użytkownicy, których wysokość urządzenia wynosi 360 pikseli i więcej, zobaczą coś podobnego do następującej strony internetowej:

Urządzenia o wysokości poniżej 360px nie będą wyświetlać obramowania akapitu na stronie internetowej.

8. Funkcja szerokości

Funkcja szerokości zapytania o media umożliwia tworzenie określonych stylów CSS na podstawie szerokości widocznego obszaru urządzenia użytkownika. Ta funkcja obsługuje również zasięg, więc masz możliwość korzystania z minimalna szerokość oraz maksymalna szerokość słowa kluczowe.

Korzystanie z funkcji szerokości

 /* CSS */
 @media (minimalna szerokość: 600px) {
 P{
 obramowanie: 2px jednolity fioletowy;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Powyższy kod dostosowuje to, co widzi użytkownik, na podstawie szerokości jego urządzenia. Użytkownicy o szerokości urządzenia 600 pikseli i większej zobaczą coś takiego jak następująca strona internetowa:

Używanie zapytań o media opartych na szerokości i wysokości może być skuteczną strategią w: sprawienie, by Twoja strona była responsywna.

9. Funkcja koloru!

Funkcja zapytań o kolorowe media ocenia składową koloru urządzenia (czerwony, zielony, niebieski). Wartość odnosi się do liczby bitów używanych przez wyświetlacz dla każdego komponentu, co określa, ile różnych kolorów może wyświetlać. Nowoczesne urządzenia zwykle używają wyświetlacza 24-bitowego, który wykorzystuje osiem bitów na składnik koloru. Przyjmuje również wartość całkowitą, gdzie bezbarwne urządzenie ma wartość zero.

Funkcja koloru wykorzystuje również min-kolor oraz max-kolor zakresy.

Korzystanie z funkcji koloru

 /* CSS */
 @media (min-kolor: 7) {
 P{
 obramowanie: 2px stałe zielone;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Urządzenia ze składową koloru wynoszącą siedem i więcej będą wyświetlać w swoich przeglądarkach następujące dane wyjściowe:

Teraz możesz tworzyć unikalne doświadczenia użytkownika

Powinieneś być w stanie korzystać z tych zaawansowanych zapytań o media, aby poprawić wrażenia każdego użytkownika, który odwiedza Twoją witrynę lub aplikację. Ważne jest, aby zapewnić użytkownikom mobilnym i komputerowym równie pozytywne wrażenia w Twojej witrynie.

Zapytania o media nie są jedynymi narzędziami CSS, które mogą wzmocnić Twoje umiejętności programistyczne.

8 podstawowych wskazówek i sztuczek CSS, które powinien znać każdy programista

Czytaj dalej

O autorze