Iskoristite ove savjete za učinkovito stvaranje responzivnih izgleda.
Zamislite da ste učinili sav naporan posao kako biste napravili stvarno cool izgled. Ali onda, kada samo malo smanjite prozor preglednika, nađete nešto što se prelijeva. Ubacujete medijski upit da riješite problem. Ali nakon promjene veličine prozora primijetili ste da se nešto drugo pokvarilo.
To je nešto što će većina CSS programera iskusiti u jednom trenutku. No, srećom, imamo nekoliko modernih CSS rješenja koja uvelike olakšavaju jednostavno razvijanje stvari i njihovo dobro funkcioniranje. Ovaj članak istražuje 5 korisnih praksi koje treba imati na umu pri izradi web stranica. Ovi savjeti pomoći će vam da izbjegnete neugodne prekide u dizajnu.
1. Započnite s Global Style Sheetom
Uvijek počnite s globalnim stilom kada pišete CSS. Ne brinite o izgledu. Umjesto toga postavite generičke stilove kao što su tipografija, boje i pozadine. Ponovno postavite margine, uklonite podcrtane crte s poveznica i tako dalje.
Nakon što završite s općim stilom, možete početi stvarati izgled i ciljati pojedinačne elemente unutar izgleda. Uglavnom, počnite od vrha i zatim prijeđite na elemente.
Sljedeći primjer CSS-a resetira marginu na svim elementima na 0, definira tipografiju i boju svih glavnih naslova i dodaje dosljednu marginu svima njima:
tijelo,
h1,
h2,
h3,
str {
margina: 0;
}h1,
h2,
h3 {
boja: plava;
obitelj-fontova: "Verdana" sans-serif;
težina fonta: 900;
linija-visina: 1;
}
h2,
h3,
str {
margina-dno: 1rem;
}
Sada kada ste definirali sve osnovne stilove, možete graditi od tamo. Na primjer, možete dodati ispunu elementu spremnika. Ovo će gurnuti sadržaj dalje od rubova vašeg preglednika. Tada možete primijeniti a maksimalna širina slikama kako bi se mogli prilagoditi širini spremnika. Poanta je krenuti od općih elemenata prije ciljanja na specifične elemente.
Još jednom, izgled će biti responzivan. Kako mijenjate veličinu zaslona, tako će se mijenjati i veličina elemenata. Kao razvojni programer trebali biste biti svjesni ovih CSS savjeta i trikova jer mogu podići vašu produktivnost na višu razinu.
2. Izbjegavajte fiksne veličine
Kada počnete razmišljati o izgledima, prva stvar koju biste trebali imati na umu je izbjegavanje fiksnih veličina. Fiksne veličine odnose se na svojstva poput širina: 1000px, visina: 200px, i tako dalje. Postavljanje fiksne visine ili širine samo će vam uzrokovati probleme na duge staze.
Umjesto toga, koristite prilagodljive visine i širine. Jedan od načina je korištenje min-visina i min-širina umjesto visina i širina. Na primjer, pretpostavimo da širinu elementa postavite na 600 px. Kada smanjite veličinu od 600 piksela, tada će se sadržaj prelijevati:
Umjesto toga, trebali biste promijeniti svojstvo iz širina do maksimalna širina. S maksimalna širina, elementu će biti dopušteno smanjivanje kako se prozor preglednika sužava. A ako se prozor proširi, tekst će se proširiti na svoju izvornu duljinu. Evo rezultata:
Ovo je isto za visina. Na primjer, pretpostavimo da ste postavili visina zaglavlja na fiksnu vrijednost od 200 px.
Zaglavlje {
visina: 200px;
prikaz: rešetka;
mjesto-predmeti: centar;
}
Ovo savršeno centrira sve u zaglavlju. Ali kada suzite prozor preglednika, sadržaj će na kraju istjecati iz svog spremnika. A to je zato što ste postavili fiksnu visinu na zaglavlju.
općenito, visina i širina oba su opasna svojstva. Rješenje je korištenje prilagodljive visine i širine, tj. min- i max-visina, i min- i maksimalna širina. U tim slučajevima, ako preglednik naiđe na situacije u kojima sadržaj postaje dulji, zaglavlje će rasti kako bi se tome prilagodilo.
Ovo je jedan od najčešće CSS pogreške koje biste trebali izbjegavati.
3. Imajte na umu da je vaša web-lokacija responzivna prema zadanim postavkama
Imajte na umu da je vaša web stranica responzivna čak i prije nego što napišete jedan redak CSS koda. Ovakav način razmišljanja može vam pomoći da izbjegnete prekompliciranje procesa dizajna. Raspored će funkcionirati na masivnim zaslonima i malenim zaslonima. Možda nije lijepo. Možda je čak i teško čitati na velikim ekranima. Ali web stranica se prilagođava prozoru bez obzira na veličinu.
Naravno, slike se mogu prelijevati, a tekst može biti premalen. Ali nećete ništa izgubiti sa zadanim izgledom. Vaš tekst se neće prekidati, a svi elementi će biti vidljivi na ekranu.
Razumijevanje i prihvaćanje ove činjenice može stvarno pomoći kada pišete svoj CSS kod. Kada naiđete na probleme, bit ćete sigurni da pogreška proizlazi iz CSS-a koji ste napisali. To olakšava pronalaženje problema i njegovo rješavanje.
Pokušajte koristiti medijske upite samo da biste dodali složenost. Na primjer, kada želite da vaš izgled ima tri stupca na većim zaslonima. U suprotnom, nemojte ih koristiti. Za dublji uvid u medijske upite pročitajte naš vodič za medijske upite.
Evo jednog scenarija. Zamislite da element s nazivom klase .podjela ima tri elementa u sebi. Sa sljedećim CSS-om stvorit će se raspored u tri stupca:
.podjela {
prikaz: savijati;
flex-direction: red;
praznina: 2rem;
}
Na manjim ekranima (40em široko ili manje), htjeli biste da sve zauzima jedan stupac. Dakle, učinili biste ovo:
@mediji(maksimalna širina: 40em) {
.podjela {
prikaz: blok;
}
}
Ovdje nadjačavate zadano poravnanje (tri stupca). Ali medijski upit je nepotreban jer preglednik koristi prikaz: blok prema zadanim postavkama. Dakle, ne morate ga eksplicitno definirati.
Imajući to na umu, možete refaktorirati svoj kod da koristi jedan medijski upit koji se odnosi samo na velike zaslone. Tamo ćete se prebaciti na tri stupca kada je zaslon širi od 40em:
@mediji(maksimalna širina: 40em) {
.podjela {
prikaz: savijati;
flex-direction: red;
praznina: 2rem;
}
}
Na malim ekranima preglednik slaže sve u jedan stupac. Ali ne morate to navesti jer preglednik koristi prikaz: blok prema zadanim postavkama. Dakle, upotrijebili ste samo medijske upite da biste dodali složenost.
Dakle, umjesto dodavanja složenosti i potrebe nadjačavanja gomile svojstava, sada dodajete složenost kada vam je to potrebno. Većinu vremena trebat će vam samo min-širina medijski upiti. Prvo počnite s mobilnim uređajima, a zatim kada stranica bude izgledala sjajno na mobilnim uređajima, dodajte složenost (npr. stupce) za verziju za stolna računala.
5. Iskoristite prednosti modernog CSS-a
Koristeći moderne CSS pristupe, možete pobjeći od većine problema s poravnavanjem i prijelomnih točaka i krenuti prema postizanju intrinzičnog dizajna.
Jedan od načina na koji to možete učiniti je:
h1 {veličina fonta: stezaljka (3rem, 1rem + 10vw, 7rem)}
Ovo steže h1 između minimalne i maksimalne veličine fonta. Najmanji do kojeg želimo da ide je 3rem a najviši je 7rem. Sredina je ono što ćemo ponavljati (1 rem + 10 vw). Kao rezultat toga, naslov će se automatski smanjivati kako se okvir za prikaz smanjuje i rasti kako se povećava.
Saznajte više o modernom CSS-u
CSS se dosta razvio tijekom godina. Danas imamo novije i bolje pristupe za pozicioniranje elemenata u CSS-u. U ovom članku dotakli smo se nekih od tih praksi i istaknuli kako vam mogu pomoći da izbjegnete uobičajene zamke dizajna. Jedan od najboljih načina da naučite moderni CSS je putem praktičnog pristupa, kao što je korištenje modernog CSS-a za dizajn HTML tablice.
