Cum să utilizați punctele de întrerupere CSS pentru a crea modele receptive

Succesul unui site web depinde foarte mult de experiența utilizatorului. În zilele noastre, utilizatorii accesează un site web de pe mai multe dispozitive diferite, iar oferirea unei experiențe de utilizator egale pe fiecare dispozitiv poate fi o provocare. Acolo pot fi utile punctele de întrerupere CSS.

Punctele de întrerupere CSS pot fi extrem de benefice pentru crearea de site-uri receptive care oferă o experiență excelentă pentru utilizator pe orice dispozitiv, dar rămân și unul dintre cele mai confuze aspecte ale designului web, în ​​special pentru dezvoltatorii noi.

Să începem!

Ce este un punct de întrerupere CSS?

Punctele de întrerupere CSS sunt puncte în care conținutul site-ului web răspunde în funcție de lățimea dispozitivului, permițându-vă să afișați cel mai bun aspect posibil utilizatorului.

Punctele de întrerupere CSS sunt numite și puncte de întrerupere a interogării media, deoarece sunt utilizate cu interogare media.

În acest exemplu, puteți vedea cum se adaptează aspectul la dimensiunea ecranului. Aspectul la rezoluție mare are un antet și un corp cu două coloane, dar în dispozitivele mici se transformă într-un aspect cu o singură coloană.

Cum să setați punctele de întrerupere CSS

Partea dificilă este să decideți singuri punctele de întrerupere. Nu există șabloane standard și cadre diferite folosesc puncte de întrerupere diferite.

Deci, ce abordare ar trebui să adoptați pentru punctele de întrerupere?

Există două abordări probabile de urmat:

• Puncte de întrerupere în funcție de dispozitiv
• Puncte de întrerupere bazate pe conținut

Puncte de întrerupere CSS bazate pe dispozitiv

Decizia punctelor de întrerupere pe baza diferitelor dispozitive pare o idee bună, dar, în realitate, nu este întotdeauna cea mai bună abordare. Avem deja suficiente dispozitive de care să ne facem griji, iar când apare unul nou cu o lățime diferită, revenirea la CSS și adăugarea unui nou punct de întrerupere este consumatoare de timp.

Cu toate acestea, este încă o opțiune viabilă, deoarece este posibil să descoperiți că funcționează bine pentru dvs. Iată un exemplu de puncte de întrerupere specifice dispozitivului:

 [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]

Cu această abordare, veți ajunge să aveți o listă uriașă de interogări media.

Puncte de întrerupere CSS bazate pe conținut

Opțiunea ideală pentru a decide punctele de întrerupere se bazează pe conținutul site-ului dvs. Această metodă vă permite să adăugați pur și simplu puncte de întrerupere unde conținutul dvs. necesită ajustare a aspectului. Acest lucru va face interogarea dvs. media mult mai simplă și gestionabilă.

Acest punct de întrerupere înseamnă că CSS se va aplica atunci când lățimea dispozitivului este de 768 px și mai mult.

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

De asemenea, puteți seta un interval cu puncte de întrerupere, astfel încât CSS se va aplica numai în aceste limite.

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

Când să folosiți punctele de întrerupere CSS cu lățime minimă sau maximă

Puteți seta punctele de întrerupere în diferite moduri folosind min-width , max-width sau chiar combinând ambele. Dar întrebarea este, când ar trebui să le folosiți pe fiecare?

Pentru a răspunde într-un mod simplu, dacă vă proiectați layout-ul cu o abordare care atrage întâi pe mobil, atunci utilizați puncte de întrerupere cu lățime minimă și creșteți-vă.

Setați stilurile implicite pentru dispozitivul mic și ajustați în consecință pentru dispozitivele mai mari.

De asemenea, dacă proiectați mai întâi pentru dispozitive mai mari, atunci setați CSS-ul implicit așa cum ați proceda în mod normal și ajustați pentru dispozitive mai mici cu abordarea lățimii maxime.

Utilizarea punctelor de întrerupere CSS cu SASS

Dacă utilizați un preprocesor precum SASS sau SCSS, puteți scrie puncte de întrerupere mult mai inteligente. Mixin vă permite să creați mai multe puncte de întrerupere declarative de reținut, astfel:

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

În timp ce lucrați într-un grup, este mult mai ușor să vă amintiți „tablet-up” decât 768px sau 48em. Oricine poate înțelege acest punct de întrerupere; este pentru tablete și dimensiuni de ecran de mai sus.

Ce puncte de întrerupere CSS să folosiți

Am văzut cum să folosim punctele de întrerupere și când să le folosim, dar încă rămâne întrebarea: ce puncte de întrerupere specifice ar trebui să utilizați?

Să descompun lucrurile puțin. Trebuie să vizați dimensiuni pentru desktop, tabletă și numai pentru dispozitive mobile. Puteți verifica câteva cadre populare pentru a vă face o idee despre abordarea de urmat.

Bootstrap are puncte de întrerupere la 576px, 768px, 992px și 1200px. Fundația are în principal puncte de întrerupere la 40em și 64em. La Bulma, punctele de întrerupere sunt setate la 768px, 769px, 1024px, 1216px și 1408px.

Fiecare dintre ele are puncte de întrerupere diferite, dar un lucru pe care îl au în comun este o abordare bazată pe mobil. Puteți utiliza unul dintre aceste puncte de întrerupere ca punct de pornire sau puteți veni cu al dvs., astfel:

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

Ai înțeles ideea!

Încheierea

Pentru a rezuma, punctele de întrerupere CSS sunt o modalitate excelentă de a vă restructura aspectul pentru a oferi cea mai bună experiență utilizator pe diferite dispozitive.

Încercați întotdeauna să creați puncte de întrerupere bazate pe propriul conținut, nu pe dispozitive. Împărțiți-le la o lățime logică mai degrabă decât la o lățime aleatorie și păstrați-le la un număr ușor de gestionat, astfel încât modificarea să rămână simplă și clară.

Ce puncte de întrerupere CSS folosiți pentru machetele dvs.? Anunțați-ne în secțiunea de comentarii de mai jos.

Ce urmeaza?

Creați și testați blocurile dvs. personalizate Gutenberg cu Local gratuit!

Aflați mai multe despre Local aici!

Pentru mai multe sfaturi despre crearea de site-uri receptive, consultați aceste articole!

• Cum să vă faceți site-ul WordPress prietenos pentru dispozitive mobile
• Cum să creați un meniu de navigare receptiv în WordPress
• 7 sfaturi de bune practici pentru design web receptiv