100% Modul corect de a face breakpoint-uri adaptive în css

Uită-te la punctele de mai sus. Unii dintre ei se lipesc împreună, în timp ce alții se află la o distanță una de cealaltă, vezi? Vreau să le spargeți în 5 grupe după cum doriți.







Haideți. Asigurați-vă că nimeni nu se uită și trageți cinci cercuri cu degetele copilului.

Cel mai probabil, ați circulat punctele aproximativ, așa cum se arată mai jos, nu? Și nu spuneți că ați derulat pagina, fără a căuta puncte. Apoi am un feyspalm.

100% Modul corect de a face breakpoint-uri adaptive în css

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Dreapta extremă a celor două puncte ar putea fi combinată într-un mod diferit. Dacă le-ai târât, e în regulă. Ei spun că nu există un răspuns greșit.

Înainte de a continua, vreau să vă întreb dacă ați încercat să faceți acest lucru.

Cel mai probabil, nu, nu?

Dar exact așa ar trebui să faceți dacă ați fi nevoit să setați puncte de oprire în locuri care coincid cu lățimea exactă a ecranului dispozitivelor populare (320px, 768px, 1024px).

Ați auzit sau ați pronunțat vreodată un citat de mai jos? "Punctul mediu de distanțare ajunge la 768 pixeli sau include 768 pixeli? Deci-așa ... este un mod peisaj pentru iPad sau mare? Oh, mare, deoarece este de 768 de pixeli și mai mare. Văd. Și mic, apoi 320px? Pentru cine este atunci intervalul de la 0 la 319px? Pentru insecte?

V-aș putea arăta punctele de întrerupere și totul, dar mă întreabă de ce această ciudată metodă de grupare a primit o astfel de popularitate.

De ce ar trebui dimensiunile să fie exact așa?

Cred că răspunsul la această întrebare, ca multe alte probleme, se află în neînțelegerea terminologiei. În final, știm cu toții glumele despre valul din Guantanamo. Suna superb dacă nu știi ce înseamnă. (Este păcat că această glumă nu a fost inventată de mine.) În închisoarea de la Guantanamo, prizonierii au fost torturați, imitând înecarea de maree.

Mi se pare că amestecăm conceptele de limite și intervale atunci când discutăm și creăm puncte de întrerupere.

Spuneți-mi, dacă faceți breakpoints în Sass, ați creat o variabilă $ mare cu o valoare de 768px?

Este limita inferioară sau superioară pe care o numiți mare? În cazul în care cel de jos, atunci nu ar trebui să aibă $ mici, deoarece ar trebui să fie 0, nu?

Și dacă aceasta este limita superioară, cum ați seta variabila $ large-and-up? Trebuie să creați o solicitare media cu min-lățime egală cu media pe medii $, nu?

Dacă, vorbind de mari, înțelegeți doar limitele, atunci veți deveni confuz, deoarece solicitările media sunt întotdeauna o gamă.

Mizerie completă, pentru care încă pierdem timpul să înțelegem totul. Prin urmare, propun:

să definească corect punctele de întrerupere;

dă rangurilor un nume rezonabil;

Sfat # 1: definiți corect punctele de întrerupere

Deci, care sunt punctele de întrerupere corecte? Ați atras deja aceste cercuri, introducându-vă ca fiind mici. Voi face doar dreptunghiuri din ele.

600px, 900px, 1200px și 1800px dacă intenționați să faceți ceva special pentru utilizatorii cu monitoare foarte mari. Off-topic, dacă comandați un monitor mare online, asigurați-vă că acesta este pentru computer. Nu doriți să primiți o șopârlă gigantă prin poștă.

Punctele pe care le-ați jucat atunci când ați fost mici, de fapt, reprezintă cele mai comune 14 dimensiuni ale ecranului:

100% Modul corect de a face breakpoint-uri adaptive în css

Puteți crea o imagine destul de mică a ecranelor folosite de oamenii de afaceri, designeri, dezvoltatori și testere.

100% Modul corect de a face breakpoint-uri adaptive în css







100% Modul corect de a face breakpoint-uri adaptive în css

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Sfat # 2: Dați domeniilor un nume rezonabil

Poți să apelezi la pauză-urs și la bebeluși, dacă vrei. Dar dacă stau jos cu designerul pentru a discuta aspectul site-ului pe diferite dispozitive, vreau ca conversația noastră să se încheie cât mai curând posibil. Dacă numele tabletei portret mă ajută să grăbesc conversația, voi fi fericit. Da, chiar m-am iertat, dacă ați numit dimensiunea "portret iPad".

Termenul de valabilitate al CSS pe site este de 3 ani în medie (dacă nu este Gmail). IPad-ul sa dublat în acest timp și este încă folosit. Știm că Apple nu mai produce produse noi, ci doar elimină ceva din lucrurile existente (butoane, găuri, etc.).

Băieți, 1024x768 nu vor merge nicăieri. Să nu ne ascundem capul în nisip. Amuzant: struții nu trăiesc în orașe, pentru că nu există nisip, nicăieri să se ascundă de prădători.

Concluzie: comunicarea este foarte importantă. Nu vă duceți în mod intenționat din vocabularul util.

Sfat # 3: declarați

Știu, știu, "declarativ", din nou cuvântul ăsta. Voi spune într-un alt mod: CSS ar trebui să determine ce trebuie făcut și nu cum ar trebui să se întâmple. Cuvântul "cum" se referă mai mult la unele lucruri mici în mixine.

Așa cum am spus mai sus, confuzia în jurul punctelor de întrerupere se datorează parțial faptului că variabilele care definesc limitele intervalului sunt folosite ca nume ale acestui interval. $ mare: 600px - dacă este mare o gamă, atunci o astfel de înregistrare nu are sens. Același lucru ca și cum spune var coordonate = 4 ;.

Astfel de lucruri pot fi ascunse în mixine și nu sunt lăsate în cod. Puteți face chiar mai bine și nu utilizați deloc variabilele.

În primul rând am scris codul de mai jos ca exemplu simplificat. Dar, de fapt, cred că acest cod acoperă toate punctele principale. Puteți vedea în acțiune pe CodePen. Am folosit Sass, nu-mi pot imagina dezvoltarea unui site fără el. În CSS sau LESS, logica este aceeași.

Poate că opinia mea este părtinitoare, dar acesta este un exemplu de cod CSS bine-declarat. Rețineți că îi forțez pe dezvoltatori să utilizeze sufixele - și numai.

Ambiguitatea dă naștere la confuzie.

Este clar că acest cod nu funcționează cu cererile media personalizate. Dar există o veste bună: doriți ca cererile media personalizate, să scrieți solicitări media personalizate. De fapt, dacă am nevoie de un cod mai complex, mă întorc la Susy.

De asemenea, codul poate fi criticat pentru 8 myksinov. Aveți posibilitatea să rescrieți totul într-un mixin și să transferați mărimea necesară, cum ar fi:

Codul funcționează, dar dacă transmiteți un nume neacceptat, nu veți primi erori la momentul compilării. Pentru a trece o variabilă Sass, avem nevoie de 8 variabile, între care trebuie să trecem în mixin.

Să nu mai vorbim de faptul că sintaxa lui @ include pentru desktop-up este mult mai frumoasă decât @ include pentru dimensiune (desktop-up).

Dezavantajul celor două coduri este acela că folosesc dublu 900px, precum și 899 de pixeli. Trebuie doar să utilizați variabilele și să scăpați unitatea după cum este necesar.

Vrei să faci asta, înainte, dar nu aș face-o. Din două motive:

Aceste numere nu se schimbă atât de des și nu sunt folosite în altă parte a codului. Problemele nu vor apărea dacă aceste numere nu sunt reprezentate sub formă de variabile. Cu excepția cazului în care, desigur, vă deschideți codul Sass într-un script care introduce o obiect JS cu aceste variabile pe pagină.

O sintaxă teribilă dacă trebuie să convertiți numere în șiruri folosind Sass. Mai jos este taxa pentru a crede că repetarea numerelor este cel mai rău dintre rele:

Ei bine, pentru că în ultimele paragrafe am mărit ușor tonul ... Îmi pare rău pentru acei proști care sunt implicați în trucuri, cum ar fi stocarea punctelor de întrerupere în lista Sass și apoi trimiterea cererilor media prin buclă. Ei bine, sau ceva de genul asta, astfel încât dezvoltatorii viitori trebuiau să decodeze codul lor.

Bug-urile se află în complexitatea lor.

În cele din urmă, s-ar putea să vă gândiți: "Ar trebui să definesc puncte de întrerupere pentru conținut, nu pentru dispozitive?". Sunt surprins că ați ajuns atât de departe și că răspunsul este da ... pentru site-uri cu un aspect. Ei bine, sau dacă aveți multe machete și nu vă deranjează să întrebați diferite puncte de întrerupere pentru toate aspectele. De asemenea, răspunsul este da, dacă designul de pe site-ul dvs. se schimbă foarte rar sau doriți să schimbați toate punctele de întrerupere atunci când actualizați design-ul astfel încât să se bazeze pe conținut.

Pe site-uri complexe, puteți lua câteva puncte de întrerupere și le puteți folosi, totul este mult mai ușor.

Sfaturi pentru bonusuri pentru dezvoltarea punctelor de întrerupere

100% Modul corect de a face breakpoint-uri adaptive în css

Chiar și pe intersecțiile flickr pe 768 și 1400

Dacă trebuie să selectați puncte de întrerupere CSS pentru un ecran mai mare decât cel pe care îl aflați în prezent, utilizați modul adaptiv în Panoul dezvoltatorului Chrome, unde puteți specifica orice dimensiune.

Panoul albastru afișează solicitări media maxime, cerințe media pe portocaliu - min-lățime, bara verde afișează cererile media min și max.

Dacă faceți clic pe interogarea media, lățimea ecranului se modifică la cea specificată în interogare. Două clicuri pe comutatorul panoului verde între lățimea minimă și cea maximă.

Ediție: Comanda webformself.

100% Modul corect de a face breakpoint-uri adaptive în css

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame

100% Modul corect de a face breakpoint-uri adaptive în css

Bootstrap framework - o facem adaptabil, pur și simplu, repede!







Articole similare

Trimiteți-le prietenilor: