A aspect receptiv a devenit norma în designul web, acest tip de aspect al paginii înseamnă că, dacă fereastra care o conține își schimbă brusc dimensiunea, adică de la foarte mare la foarte mică și invers, elementele noastre trebuie să fie în capacitatea de a rearanja pentru a menține un experiență decentă și funcțională a utilizatorului.
Acest lucru a fost întotdeauna disponibil cu regulile CSSCu toate acestea, în ultima implementare a aceluiași, au fost luate măsuri mai bune, parțial datorită existenței deja lumii mobile moderne, care este unul dintre marii consumatori de design receptiv.
Deși există mai multe cadre precum Bootstrap sau fundație care ne oferă un aspect receptiv în mod implicit, nu putem depinde întotdeauna de ele, de aceea este foarte util să știm cum putem construi un aspect al acestor caracteristici prin propriile noastre mijloace.
Cerințe
1- Pentru a finaliza acest tutorial va trebui să avem cunoștințe de bază despre HTML Da CSS, deoarece acestea sunt vitale pentru a înțelege exemplele făcute în tutorial.
2- Din punct de vedere tehnic, avem nevoie de cel puțin un browser modern, cum ar fi Google Chrome, un editor de text pentru a scrie codul nostru, îl putem folosi Text sublim o NotePad ++ sau chiar notepad-ul Windows sau Gedit pe Linux dacă ne simțim aventuroși.
3- În cele din urmă, avem nevoie de o conexiune la Internet pentru a descărca o imagine sau două, dacă dorim să o plasăm în codul nostru așa cum vom vedea într-unul dintre exemplele prezentate.
Proprietatile minwidth și maxwidth
Acesta este probabil primul aspect pe care îl întâlnim atunci când lucrăm cu medii receptiv, deoarece de multe ori ne concentrăm asupra momentului în care pagina devine mai mică, dar ce zici de noile ecrane ale 4K? De aceea nu trebuie să neglijăm rezoluția maximă sub care site-ul nostru arată decent.
minwidth și maxwidthProprietățile sau atributele minwidth Da lățimea maximă CSS ne ajută să luptăm împotriva acestei probleme, deoarece ne permit să stabilim marjele maxime sub care dorim să fie proiectarea noastră receptiv, deoarece dacă nu, extremele dimensiunilor ne pot juca un truc, mai ales în aceste momente în care rezoluțiile continuă să crească, dar încă nu devin masive.
În exemplul următor vom demonstra modul în care ne putem reglementa aspect datorită proprietăților menționate, pentru aceasta vom crea un document HTML cu următorul conținut:
Exemplu de aspect receptiv 1Ceea ce am făcut este să creăm trei elemente div care funcționează ca un fel de coloane, așa că spunem elementului său container în acest caz articol că lățimea sa maximă va fi 1200 pxDeci, indiferent cât de mare este ecranul, designul nu va crește niciodată mai mult de acolo, apoi creăm trei clase, una pentru fiecare div și una atribuim o lățime minimă în acest fel, indiferent de cât de redus este ecranul, pentru a menține acel minim de proporții, acest lucru este excelent pentru imagini, așa cum vom vedea în captura de ecran a exemplului și, în cele din urmă, pentru clasă pluti îi atribuim și o lățime minimă. Să vedem cum arată exemplul nostru în browser când avem o rezoluție mare:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis pain. Aliquam ac nisl vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis pain. Aliquam ac nisl vehicula.
MARI
Acum să vedem cum se scalează atunci când reducem puțin fereastra browserului:
MARI
În cele din urmă, să vedem rezultatul atunci când facem ca fereastra să aibă o dimensiune similară cu cea a unui telefon mobil:
Am putut vedea cum s-au menținut proporțiile stabilite ca minim și maxim, dar cel mai important lucru este că designul nostru a fost adaptat diferitelor rezoluții cu care l-am vizualizat și, în acest fel, am putut să ne asigurăm că utilizatorul nu pierde utilizabilitate în experiența lor cu site-ul nostru.
Desigur, acest lucru este departe de a fi ceva de arătat în producție, dar ne oferă o idee despre unde ar trebui să ne concentrăm unele eforturi atunci când lucrăm la modele reale pentru aplicațiile și paginile noastre, ceea ce este interesant este că coloanele au fost ajustate astfel încât am putut vedea cum am trecut de la un aspect cu 3 coloane la un aspect cu o singură coloană.
Folosind Căptușeală relativă
căptușeală Este o măsură care ne permite să menținem un spațiu al conținutului împotriva marginilor containerului, astfel încât să stabilim o limită a distanței, nu trebuie confundată cu marja, deoarece acesta este un alt concept.
Ideea este că căptușeală aproape niciodată nu se ia în considerare la realizarea unui aspect a fi receptiv rezultând texte și conținut care ulterior rămân neestetice la schimbarea rezoluției cu care este vizualizat designul.
În următorul cod ceea ce vom face este să plasăm un căptușeală care funcționează relativ, adică, pe măsură ce dimensiunea ferestrei este ajustată, a noastră căptușeală Se va schimba pentru a menține proporțiile și astfel va face ca conținutul să rămână întotdeauna așa cum am aranjat, în ciuda faptului că are mai puțin spațiu din cauza schimbării rezoluției. Să vedem exemplul nostru de cod:
Căptușeală relativăPăstrați proporțiile cu o umplutură relativăDupă cum vedem, definim proprietățile căptușeală a fiecărei clase cu valori procentuale în loc de valori fixe cu măsurători în pixeli, în acest fel interpretorul de stil al browserului va da o măsurătoare care merge în funcție de valoarea pe care am plasat-o, la sfârșit când ne vedem exemplul în browser primim următoarele:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
MARI
Acum, dacă reducem dimensiunea ferestrei, vom vedea cum se face o ajustare, dar menținând o distanță proporțională de la text la margini:
Observăm apoi modul în care designul nostru este menținut și previne deformarea prin reducerea rezoluției persoanei care îl conține, menținând astfel o experiență consistentă pentru utilizatorul nostru.
Deși există concepte mai avansate pe care le vom atinge în alte tutoriale, cu aceste câteva trucuri sau sfaturi putem reuși să dăm o nouă viață site-urilor noastre vechi și mult mai mult acum decât motoarele de căutare precum Google Ne cer o versiune mobilă pentru a ne putea da preferințe în rezultate. Cel mai important lucru pentru a obține rezultate excelente este să experimentăm și să continuăm să practicăm mult, astfel încât aceste soluții să iasă în mod natural din mintea noastră și să nu fie nevoiți să recurgem în permanență la ghiduri.
Cu aceasta terminăm acest tutorial, deoarece vedem că nu avem nevoie de niciun cadru pentru a obține rezultate receptivși, de asemenea, nu trebuie să părăsim combinația HTML + CSSSingurul lucru este că, dacă trebuie să ne construim propriile instrumente, totuși satisfacția de a ne îmbunătăți designul este o mare recompensă.
