Punkty przerwania w zapytaniach dotyczących mediów CSS | Wyjaśnione

Zapytania o media CSS są określane jako zapytania, które umożliwiają zmianę wyglądu struktury internetowej w zależności od rodzaju urządzenia za pomocą strony internetowej, takiej jak komputer stacjonarny, telefony, laptopy itp., I okazują się przydatne w projektowaniu responsywnych stron internetowych. Te zapytania są określone przy użyciu reguły @Media i powinny być zdefiniowane w określonych punktach, w których wymagana jest modyfikacja układu internetowego. Te punkty nazywane są punktami przerwania, które szczegółowo omówiliśmy poniżej.

Wprowadzenie do punktów przerwania CSS

Punkty przerwania w CSS są określane jako punkty, na których zmienia się układ strony internetowej odpowiadający rozmiarowi ekranu typu urządzenia. Punkty te są również uważane za punkty przerwania zapytań medialnych, ponieważ są one określone w zapytaniach dotyczących mediów.

Teraz, gdy dowiedzieliśmy się, czym są punkty przerwania zapytań medialnych, zbadajmy, jak je ustawić.

Ustawienie punktów przerwania CSS

Nie ma standardu, aby ustawić punkt przerwania, dlatego punkty przerwania zdefiniowane w różnych strukturach internetowych mogą się różnić. Jednak otrzymaliśmy dwa rodzaje podejść do ustalenia punktu przerwania.

1. Punkty przerwania typu urządzenia

2. Punkty przerwania typu treści

Zobaczmy je szczegółowo.

Punkty przerwania typu urządzenia

Jak sama nazwa wskazuje, punkty przerwania typu urządzenia w odniesieniu do procedury określania punktów przerwania na podstawie różnych typów urządzeń. Chociaż może to nie być uważane za dobre podejście, ponieważ technologia ewoluuje w minucie, a nowe urządzenia pojawiają się od czasu do czasu. Dlatego za każdym razem, gdy pojawia się nowe urządzenie, programiści musi określić punkt przerwania dla tego konkretnego urządzenia, który może być gorączkowy.

Ponadto lista zapytań medialnych jest ogromna, gdy definiuje punkty przerwania zgodnie z typem urządzenia. Różne urządzenia na podstawie których możesz zdecydować, że punkty przerwania są następujące.

1. Desiktops

2. Tabletki

3. Telefony komórkowe

Tutaj przedstawiliśmy kilka przykładów punktów przerwania opartych na urządzeniach.

Na iPhone 13

@Media tylko ekran i (szerokość urządzenia: 1170px) i (wysokość urządzenia: 2532px)

…

Dla Samsung Galaxy S9+

@media tylko ekran i (szerokość urządzenia: 1440px) i (wysokość urządzenia: 2960px)

…

Zamiast określić punkty przerwania każdego urządzenia osobno, możesz również zdefiniować punkty przerwania dla wspólnych grup urządzeń.

/ * Dla bardzo małych urządzeń (486px i poniżej) */
@Media tylko ekran i (maksymalny szerokość: 486px) …
/ * Dla małych urządzeń (596px i więcej) */
@Media tylko ekran i (min-szerokość: 596px) …
/ * Dla średnich urządzeń (720px i więcej) */
@Media tylko ekran i (min-szerokość: 720px) …
/ * Dla dużych urządzeń (995px i więcej) */
@Media tylko ekran i (min-szerokość: 995px) …
/ * Dla dodatkowych dużych urządzeń (1100px i więcej) */
@Media tylko ekran i (min min: 1100px) …

Punkty przerwania typu treści

Określając punkty przerwania w oparciu o rodzaj treści wyświetlającej witrynę, używane są punkty przerwania typu treści. Jest to uważane za dobre podejście, ponieważ takie podejście wymaga określenia punktów przerwania tylko w tych punktach, w których treść potrzebuje jakichkolwiek dostosowań. Korzystając z tego podejścia, liczba zapytań medialnych staje się coraz mniejsza do zarządzania.

Niektóre przykładowe punkty przerwania typu treści są podane poniżej.

Dla szerokości ekranu 720px i szerszego.

@Media tylko ekran i (min min: 720px)

…

Dla rozdzielczości ekranu między 480px a 720px.

@Media tylko ekran i (min min: 480px) i (maksymalna szerokość: 720px)

…

Używanie punktów przerwania min i maksymalnie szerokości w prawej miejscach

W powyższych przykładach musiałeś zauważyć, że zastosowaliśmy dwa rodzaje punktów przerwania, które są szerokością min, i maksymalną szerokość. W twoim umyśle musi pojawić się pytanie, które można użyć.

Odpowiedź na to pytanie jest prosta: jeśli najpierw opracowujesz swoją witrynę dla mniejszych urządzeń, to ustawiaj domyślne punkty przerwania CSS z szerokością min i odpowiednio dostosuj dla większych urządzeń. Tymczasem jest odwrotnie w przypadku większych urządzeń. Jeśli najpierw opracowujesz większe urządzenia, użyj maksymalnej szerokości, a następnie odpowiednio dostrajaj dla mniejszych urządzeń.

Używane rodzaje punktów przerwania

Kiedy rynek typu urządzenia nie był tak ogromny, jak teraz, szerokość ekranu dla każdego urządzenia była określona osobno, to podejście nie jest teraz zalecane, ponieważ istnieje szeroki zakres rodzajów urządzeń na rynku.

Preferowane podejście polega na tym, że powinieneś być świadomy rodzaju projektu stron internetowych, docelowych odbiorców i typu urządzeń, które odbiorców głównie używa, oraz szerokość ekranu tych urządzeń. Tutaj zaciągnęliśmy niektóre często używane punkty przerwania.

1. W przypadku urządzeń mobilnych: 320px do 480px

2. W przypadku tabletów i iPadów: 481px do 768px

3. W przypadku laptopów: 769px do 1024px

4. Dla komputerów stacjonarnych: 1025px do 1200px

Wniosek

Punkty przerwania w CSS są określane jako punkty, na których zmienia się układ strony internetowej odpowiadający rozmiarowi ekranu typu urządzenia. Istnieją dwa rodzaje punktów przerwania, jeden określony na podstawie typu urządzenia, a drugi są zdefiniowane na podstawie typu treści. Podejście korzystające z typu treści jest preferowane w stosunku do rodzaju urządzenia, ponieważ na rynku dostępna jest ogromna gama urządzeń i trudno jest określić punkty przerwania dla każdego urządzenia. Chociaż istnieją pewne powszechne punkty przerwania używane dla różnych urządzeń, które szczegółowo omówiliśmy w tym zapisie wraz z innymi szczegółami dotyczącymi punktów przerwania.