Folosiți aceste sfaturi pentru a crea machete receptive în mod eficient.
Imaginați-vă că ați făcut toată munca grea pentru a face un aspect foarte grozav. Dar apoi, când îți faci fereastra browserului un pic mai mică, găsești ceva care debordează. Lansați o interogare media pentru a remedia problema. Dar la redimensionarea ferestrei, observi că s-a spart altceva.
Acesta este ceva pe care majoritatea dezvoltatorilor CSS îl vor experimenta la un moment dat. Dar, din fericire, avem mai multe soluții CSS moderne care fac mult mai ușor să dezvoltați lucruri și să le faceți să funcționeze bine. Acest articol explorează 5 practici utile de reținut atunci când dezvoltați site-uri web. Aceste sfaturi vă vor ajuta să evitați întreruperi enervante în designul dvs.
1. Începeți cu o foaie de stil globală
Începeți întotdeauna cu stilul global când scrieți CSS. Nu vă faceți griji pentru aspect. În schimb, setați stiluri generice, cum ar fi tipografia, culorile și fundalurile. Resetați marginile, eliminați sublinierea din linkuri și așa mai departe.
După ce ați terminat cu stilul general, puteți începe să creați aspectul și să vizați elemente individuale din aspect. Practic, începeți de sus și apoi treceți la elemente.
Următorul exemplu CSS resetează marja tuturor elementelor la 0, definește tipografia și culoarea tuturor titlurilor majore și adaugă o marjă consecventă tuturor:
corp,
h1,
h2,
h3,
p {
marginea: 0;
}h1,
h2,
h3 {
culoare: albastru;
familie de fonturi: "Verdana" sans-serif;
grosimea fontului: 900;
inaltimea liniei: 1;
}
h2,
h3,
p {
margine-fond: 1rem;
}
Acum că aveți toate stilurile de bază definite, puteți construi de acolo. De exemplu, puteți adăuga umplutură la elementul container. Acest lucru va îndepărta conținutul de la marginile browserului. Apoi puteți aplica a lățimea maximă la imagini, astfel încât să se poată adapta la lățimea recipientului lor. Ideea este să începem de la elementele generale înainte de a viza elemente specifice.
Încă o dată, aspectul va fi receptiv. Deci, pe măsură ce modificați dimensiunea ecranului, dimensiunea elementelor se va schimba în consecință. În calitate de dezvoltator, ar trebui să fii conștient de aceste sfaturi și trucuri CSS deoarece vă pot duce productivitatea la un alt nivel.
2. Evitați dimensiunile fixe
Când începeți să vă gândiți la machete, primul lucru pe care ar trebui să-l aveți în vedere este să evitați dimensiunile fixe. Dimensiunile fixe se referă la proprietăți precum lățime: 1000px, înălțime: 200px, și așa mai departe. Setarea unei înălțimi sau lățimi fixe vă va cauza doar probleme pe termen lung.
În schimb, utilizați înălțimi și lățimi adaptabile. O modalitate este de a folosi înălțime minimă și lățime minimă în loc de înălţime și lăţime. De exemplu, să presupunem că setați lățimea unui element la 600px. Când deveniți mai mici de 600 px, atunci conținutul va depăși:
În schimb, ar trebui să schimbați proprietatea din lăţime la lățimea maximă. Cu lățimea maximă, elementului i se va permite să se micșoreze pe măsură ce fereastra browserului este restrânsă. Și dacă fereastra devine largă, textul se va extinde înapoi la lungimea inițială. Iată rezultatul:
Acest lucru este la fel pentru înălţime. De exemplu, să presupunem că ați setat înălţime a unui antet la o valoare fixă a 200px.
antet {
înălţime: 200px;
afişa: grilă;
obiecte-loc: centru;
}
Acest lucru centrează perfect totul în antetul. Dar când restrângeți fereastra browserului, conținutul va curge în cele din urmă din containerul său. Și asta pentru că ai setat o înălțime fixă pe antet.
În general, înălţime și lăţime sunt ambele proprietăți periculoase. Soluția este să utilizați înălțimea și lățimile adaptabile, adică min- și inaltime maxima, și min- și lățimea maximă. În aceste cazuri, dacă browserul se confruntă cu situații în care conținutul devine mai lung, atunci antetul va crește pentru a se adapta la asta.
Acesta este unul dintre cele mai frecvente greșeli CSS pe care ar trebui să le evitați.
3. Amintiți-vă că site-ul dvs. este receptiv în mod implicit
Rețineți că site-ul dvs. web este receptiv chiar înainte de a scrie o singură linie de cod CSS. Această mentalitate vă poate ajuta să evitați complicarea excesivă a procesului de proiectare. Aspectul va funcționa pe ecrane masive și pe ecrane minuscule. S-ar putea să nu fie frumos. Poate fi chiar greu de citit pe ecrane mari. Dar site-ul se adaptează la vizualizarea, indiferent de dimensiunea acestuia.
Desigur, imaginile pot depăși, iar textul ar putea fi prea mic. Dar nu veți pierde nimic cu aspectul implicit. Textul dvs. nu se va rupe și toate elementele vor fi vizibile pe ecran.
Înțelegerea și acceptarea acestui fapt vă poate ajuta cu adevărat atunci când scrieți codul CSS. Când întâmpinați probleme, veți fi sigur că eroarea provine din CSS-ul pe care l-ați scris. Acest lucru face mai ușor să găsiți problema și să o remediați.
Încercați să utilizați interogări media doar pentru a adăuga complexitate. De exemplu, când doriți ca aspectul dvs. să aibă trei coloane pe ecrane mai mari. În caz contrar, nu le folosiți. Pentru o scufundare profundă în interogările media, citiți ghid de interogări media.
Iată un scenariu. Imaginați-vă că elementul cu un nume de clasă de .Despică are trei elemente în interiorul său. Cu următorul CSS, va fi creat un aspect cu trei coloane:
.Despică {
afişa: contracta;
flex-direcție: rând;
decalaj: 2rem;
}
Pe ecrane mai mici (40em lat sau mai puțin), ați dori ca totul să ocupe o singură coloană. Deci ai face asta:
@mass-media(lățimea maximă: 40em) {
.Despică {
afişa: bloc;
}
}
Aici, suprascrieți alinierea implicită (trei coloane). Dar interogarea media este inutilă deoarece browserul folosește afisare: bloc în mod implicit. Deci nu trebuie să-l definiți în mod explicit.
Având în vedere acest lucru, vă puteți refactoriza codul pentru a utiliza o singură interogare media care se aplică numai ecranelor mari. Acolo vei trece la trei coloane atunci când ecranul este mai lat de 40 em:
@mass-media(lățimea maximă: 40em) {
.Despică {
afişa: contracta;
flex-direcție: rând;
decalaj: 2rem;
}
}
Pe ecranele mici, browserul stivuiește totul într-o singură coloană. Dar nu trebuie să-l specificați pentru că browserul folosește afisare: bloc în mod implicit. Astfel, ați folosit doar interogări media pentru a adăuga complexitate.
Deci, în loc să adăugați complexitatea și apoi să trebuiască să suprascrieți o grămadă de proprietăți, acum adăugați complexitatea atunci când aveți nevoie. De cele mai multe ori, vei avea nevoie doar de lățime minimă interogări media. Începeți cu mobile-first, apoi când site-ul arată grozav pe mobil, adăugați complexitatea (de exemplu, coloane) pentru versiunea desktop.
5. Profită de CSS modern
Folosind abordări CSS moderne, puteți scăpa de cele mai multe probleme de aliniere și puncte de întrerupere și puteți trece spre realizarea unui design intrinsec.
O modalitate prin care poți face asta este:
h1 { dimensiunea fontului: clemă (3rem, 1rem + 10vw, 7rem)}
Acest lucru fixează h1 între o dimensiune minimă și maximă a fontului. Cel mai mic la care vrem să meargă este 3rem iar cel mai înalt este 7rem. Mijlocul este ceea ce vom repeta (1rem + 10 vw). Ca rezultat, titlul se va micșora automat pe măsură ce fereastra de vizualizare devine mai mică și crește pe măsură ce devine mai mare.
Aflați mai multe despre CSS modern
CSS a evoluat mult de-a lungul anilor. Astăzi avem abordări mai noi și mai bune pentru poziționarea elementelor în CSS. În acest articol, am atins câteva dintre aceste practici și am evidențiat modul în care acestea vă pot ajuta să evitați capcanele comune de proiectare. Una dintre cele mai bune modalități de a învăța CSS modern este prin abordarea practică, cum ar fi utilizarea CSS modern pentru a proiecta un tabel HTML.
