Jak używać punktów przerwania CSS do tworzenia responsywnych projektów

Sukces strony internetowej zależy w dużej mierze od doświadczenia użytkownika. W dzisiejszych czasach użytkownicy uzyskują dostęp do witryny internetowej z wielu różnych urządzeń, a zapewnienie jednakowego doświadczenia użytkownika na każdym urządzeniu może być wyzwaniem. Tutaj mogą się przydać punkty przerwania CSS.

Punkty przerwania CSS mogą być bardzo korzystne przy tworzeniu responsywnych witryn, które zapewniają doskonałe wrażenia użytkownika na dowolnym urządzeniu, ale pozostają również jednym z bardziej mylących aspektów projektowania stron internetowych, zwłaszcza dla nowych programistów.

Zacznijmy!

Co to jest punkt przerwania CSS?

Punkty przerwania CSS to punkty, w których zawartość witryny reaguje zgodnie z szerokością urządzenia, co pozwala pokazać użytkownikowi najlepszy możliwy układ.

Punkty przerwania CSS są również nazywane punktami przerwania zapytań o media, ponieważ są używane z zapytaniami o media.

W tym przykładzie możesz zobaczyć, jak układ dostosowuje się do rozmiaru ekranu. Układ w dużej rozdzielczości ma układ nagłówka i dwukolumnowy układ treści, ale w małym urządzeniu zamienia się w układ jednokolumnowy.

Jak ustawić punkty przerwania CSS

Trudną częścią jest samodzielne określenie punktów przerwania. Nie ma żadnych standardowych szablonów, a różne frameworki używają różnych punktów przerwania.

Więc jakie podejście powinieneś przyjąć do swoich punktów przerwania?

Istnieją dwa prawdopodobne podejścia do naśladowania:

• Punkty przerwania na podstawie urządzenia
• Punkty przerwania na podstawie treści

Punkty przerwania CSS oparte na urządzeniu

Określanie punktów przerwania na podstawie różnych urządzeń brzmi jak dobry pomysł, ale w rzeczywistości nie zawsze jest to najlepsze podejście. Mamy już wystarczająco dużo urządzeń, o które trzeba się martwić, a gdy pojawi się nowy z inną szerokością, powrót do CSS i ponowne dodanie nowego punktu przerwania jest czasochłonne.

Niemniej jednak jest to nadal realna opcja, ponieważ może się okazać, że dla Ciebie działa dobrze. Oto przykład punktów przerwania specyficznych dla urządzenia:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Dzięki takiemu podejściu będziesz mieć ogromną listę zapytań o media.

Punkty przerwania CSS oparte na treści

Idealna opcja do decydowania o punktach przerwania opiera się na zawartości Twojej witryny. Ta metoda pozwala po prostu dodać punkty przerwania, w których treść wymaga dostosowania układu. Dzięki temu Twoje zapytanie o media będzie znacznie prostsze i łatwiejsze w zarządzaniu.

Ten punkt przerwania oznacza, że ​​CSS zostanie zastosowany, gdy szerokość urządzenia wynosi 768 pikseli i więcej.

 [css]@media only screen (min-width: 768px){ ... }[/css]

Możesz także ustawić zakres z punktami przerwania, aby CSS miał zastosowanie tylko w tych granicach.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Kiedy używać punktów przerwań CSS o minimalnej lub maksymalnej szerokości

Możesz ustawić punkty przerwania na różne sposoby, używając min-width , max-width , a nawet łącząc oba. Ale pytanie brzmi, kiedy należy używać każdego z nich?

Aby odpowiedzieć w prosty sposób, jeśli projektujesz układ z podejściem zorientowanym na urządzenia mobilne, użyj punktów przerwania o minimalnej szerokości i idź w górę.

Ustaw domyślne style dla małego urządzenia i po prostu dostosuj odpowiednio do większych urządzeń.

Podobnie, jeśli najpierw projektujesz dla większych urządzeń, ustaw domyślny CSS tak, jak zwykle i dostosuj do mniejszych urządzeń, stosując podejście max-width.

Używanie punktów przerwania CSS z SASS

Jeśli używasz preprocesora, takiego jak SASS lub SCSS, możesz napisać znacznie inteligentniejsze punkty przerwania. Mixin umożliwia tworzenie bardziej deklaratywnych punktów przerwania do zapamiętania, na przykład:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Pracując w grupie dużo łatwiej zapamiętać „tablet-up” niż 768px czy 48em. Każdy może zrozumieć ten punkt przerwania; to jest dla tabletów i większych rozmiarów ekranu.

Jakich punktów przerwań CSS użyć

Widzieliśmy, jak używać punktów przerwania i kiedy ich używać, ale nadal pozostaje pytanie: jakich konkretnych punktów przerwań należy użyć?

Rozłóżmy trochę rzeczy. Musisz kierować reklamy tylko na komputery, tablety i urządzenia mobilne. Możesz sprawdzić niektóre popularne frameworki, aby zorientować się, jakie podejście należy zastosować.

Bootstrap ma punkty przerwania na 576px, 768px, 992px i 1200px. Foundation ma głównie breakpointy na 40em i 64em. W Bulmie punkty przerwania są ustawione na 768px, 769px, 1024px, 1216px i 1408px.

Każdy z nich ma różne punkty przerwania, ale jedną wspólną cechą jest podejście zorientowane na urządzenia mobilne. Możesz użyć jednego z tych punktów przerwania jako punktu wyjścia lub możesz wymyślić własny, w ten sposób:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Masz pomysł!

Zawijanie

Podsumowując, punkty przerwania CSS to świetny sposób na restrukturyzację układu, aby zapewnić najlepsze wrażenia użytkownika na różnych urządzeniach.

Zawsze staraj się tworzyć punkty przerwania na podstawie własnej zawartości, a nie urządzeń. Podziel je na logiczną szerokość, a nie losową, i utrzymuj je na rozsądnym numerze, aby modyfikowanie pozostało proste i jasne.

Jakich punktów przerwania CSS używasz w swoich układach? Daj nam znać w sekcji komentarzy poniżej.

Co dalej?

Twórz i testuj swoje niestandardowe bloki Gutenberga za pomocą Local za darmo!

Dowiedz się więcej o lokalnych tutaj!

Więcej porad na temat tworzenia responsywnych witryn znajdziesz w tych artykułach!

• Jak sprawić, by Twoja witryna WordPress była przyjazna dla urządzeń mobilnych?
• Jak stworzyć responsywne menu nawigacyjne w WordPress
• 7 najlepszych wskazówek dotyczących responsywnego projektowania stron internetowych