Cu ceva timp în urmă, am făcut o listă de gif-uri animate care explică principiile de bază ale proiectării web responsive. Postarea a fost extrem de populară. Se pare că nu am fost singurii cărora le este greu să explice ce face web-ul să răspundă. Astăzi lansăm un videoclip, explicând câteva dintre principii cu câteva exemple reale.

The flow

Deoarece dimensiunile ecranului devin mai mici, conținutul începe să ocupe mai mult spațiu vertical și orice lucru de mai jos va fi împins în jos, se numește flux. Acest lucru ar putea fi dificil de înțeles dacă obișnuiți să proiectați cu pixeli și puncte, dar are sens total atunci când vă obișnuiți cu el.

Unități relative

Pânza poate fi un desktop, un ecran mobil sau orice este între ele. Densitatea pixelilor poate varia, de asemenea, de aceea avem nevoie de unități flexibile și care să funcționeze peste tot. Acolo unitățile relative precum procentele vin la îndemână. Așadar, a face ceva cu 50% lățime înseamnă că va avea întotdeauna jumătate din ecran (sau viewport, care este dimensiunea ferestrei browserului deschis).

Puncte critice

Punctele de întrerupere permit modificarea aspectului în punctele predefinite, adică având 3 coloane pe un desktop, dar doar o coloană de pe un dispozitiv mobil. Majoritatea proprietăților CSS pot fi schimbate de la un punct de break la altul. De obicei acolo unde pui unul depinde de conținut. Dacă o propoziție se rupe, poate fi necesar să adăugați un punct de întrerupere. Dar folosiți-le cu precauție – vă poate deranja rapid atunci când este dificil să înțelegeți ce influențează ceea ce.

Valorile Maxime și Minime

Uneori este extraordinar faptul că conținutul ocupă întreaga lățime a unui ecran, ca pe un dispozitiv mobil, dar faptul că același conținut se întinde până la întreaga lățime a ecranului televizorului este adesea mai puțin sens. Acesta este motivul pentru care valorile Min / Max ajută. De exemplu, lățimea de 100% și lățimea maximă de 1000px ar însemna că conținutul va umple ecranul, dar nu depășește 1000px.