5 uporabnih nasvetov za ustvarjanje odzivnih postavitev

Predstavljajte si, da ste opravili vse trdo delo, da bi naredili res kul postavitev. Toda potem, ko malo pomanjšate okno brskalnika, ugotovite, da se nekaj preliva. Vnesete medijsko poizvedbo, da odpravite težavo. Toda pri spreminjanju velikosti okna opazite, da se je nekaj drugega pokvarilo.

To je nekaj, kar bo na neki točki izkusila večina razvijalcev CSS. Toda na srečo imamo več sodobnih rešitev CSS, ki zelo olajšajo samo razvijanje stvari in zagotavljanje njihovega dobrega delovanja. Ta članek raziskuje 5 uporabnih praks, ki jih morate upoštevati pri razvijanju spletnih mest. S temi nasveti se boste izognili nadležnim prelomom v vašem dizajnu.

1. Začnite z globalnim slogovnim listom

Pri pisanju CSS vedno začnite z globalnim slogom. Naj vas ne skrbi postavitev. Namesto tega nastavite splošne sloge, kot so tipografija, barve in ozadja. Ponastavite robove, odstranite podčrtaje s povezav itd.

Ko končate s splošnim slogom, lahko začnete ustvarjati postavitev in ciljati na posamezne elemente v postavitvi. V bistvu začnite od vrha in se nato pomaknite na elemente.

Naslednji primer CSS ponastavi rob na vseh elementih na 0, definira tipografijo in barvo vseh glavnih naslovov in vsem doda dosleden rob:

telo,
h1,
h2,
h3,
str {
marža: 0;
}
h1,
h2,
h3 {
barva: modra;
družina pisav: "Verdana" sans-serif;
teža pisave: 900;
višina vrstice: 1;
}
h2,
h3,
str {
margin-bottom: 1rem;
}

Zdaj, ko imate definirane vse osnovne sloge, lahko gradite od tam. Na primer, elementu vsebnika lahko dodate oblazinjenje. S tem boste vsebino potisnili stran od robov brskalnika. Potem lahko uporabite a največja širina slikam, tako da se lahko prilagodijo širini svoje posode. Bistvo je, da začnete pri splošnih elementih, preden ciljate na določene elemente.

Še enkrat, postavitev bo odzivna. Torej, ko spremenite velikost zaslona, ​​se bo ustrezno spremenila tudi velikost elementov. Kot razvijalec se morate zavedati teh nasvetov in trikov CSS saj lahko vašo produktivnost dvignejo na naslednjo raven.

2. Izogibajte se fiksnim velikostim

Ko začnete razmišljati o postavitvah, morate najprej upoštevati, da se izogibate fiksnim velikostim. Fiksne velikosti se nanašajo na lastnosti, kot je širina: 1000px, višina: 200px, in tako naprej. Nastavitev fiksne višine ali širine vam bo dolgoročno povzročala težave.

Namesto tega uporabite prilagodljive višine in širine. Eden od načinov je uporaba najmanjša višina in najmanjša širina namesto višina in premer. Denimo, da nastavite širino elementa na 600 slikovnih pik. Ko zmanjšate velikost od 600 slikovnih pik, se bo vsebina prelila:

Namesto tega bi morali spremeniti lastnost iz premer do največja širina. z največja širina, se bo element lahko skrčil, ko se okno brskalnika zoži. In če se okno razširi, se besedilo razširi nazaj na prvotno dolžino. Tukaj je rezultat:

To velja enako za višina. Recimo, da nastavite višina glave na fiksno vrednost 200 slikovnih pik.

glava {
višina: 200px;
zaslon: mreža;
mesto-predmeti: center;
}

To popolnoma centrira vse v glavi. Toda ko zožite okno brskalnika, bo vsebina sčasoma stekla iz svojega vsebnika. In to zato, ker ste na glavi nastavili fiksno višino.

Na splošno višina in premer sta obe nevarni lastnosti. Rešitev je uporaba prilagodljive višine in širine, tj. min- in največja višina, in min- in največja širina. V teh primerih, če brskalnik naleti na situacije, ko se vsebina daljša, se bo glava povečala, da se temu prilagodi.

To je eden od najpogostejše napake CSS, ki se jim morate izogibati.

3. Ne pozabite, da je vaše spletno mesto privzeto odzivno

Ne pozabite, da je vaše spletno mesto odzivno, še preden napišete eno vrstico kode CSS. Ta miselnost vam lahko pomaga preprečiti prekompliciranje procesa načrtovanja. Postavitev bo delovala na masivnih in majhnih zaslonih. Morda ne bo lepo. Morda je celo težko brati na velikih zaslonih. Toda spletno mesto se prilagaja vidnemu polju ne glede na njegovo velikost.

Seveda se lahko slike prelivajo, besedilo pa je morda premajhno. Vendar s privzeto postavitvijo ne boste ničesar izgubili. Vaše besedilo ne bo prekinjeno in vsi elementi bodo vidni na zaslonu.

Razumevanje in sprejemanje tega dejstva vam lahko resnično pomaga pri pisanju kode CSS. Ko boste naleteli na težave, boste prepričani, da napaka izvira iz CSS, ki ste ga napisali. Tako je lažje najti težavo in jo odpraviti.

Poskusite uporabiti medijske poizvedbe samo za dodatno zapletenost. Na primer, ko želite, da ima vaša postavitev tri stolpce na večjih zaslonih. V nasprotnem primeru jih ne uporabljajte. Za poglobljeno raziskovanje medijskih poizvedb preberite naše vodnik za medijske poizvedbe.

Tukaj je en scenarij. Predstavljajte si, da element z imenom razreda .razdeliti ima v sebi tri elemente. Z naslednjim CSS-jem bo ustvarjena postavitev s tremi stolpci:

.split {
zaslon: flex;
flex-direction: vrstica;
vrzel: 2rem;
}

Na manjših zaslonih (40em široko ali manj), bi želeli, da vse zasede en stolpec. Torej bi naredili tole:

@mediji(največja širina: 40em) {
.split {
zaslon: blok;
 }
}

Tukaj preglasite privzeto poravnavo (trije stolpci). Toda medijska poizvedba je nepotrebna, ker brskalnik uporablja prikaz: blok privzeto. Torej vam ga ni treba izrecno definirati.

S tem v mislih bi lahko kodo preoblikovali tako, da bo uporabljala eno samo predstavnostno poizvedbo, ki velja samo za velike zaslone. Tam boste preklopili na tri stolpce, ko je zaslon širši od 40 em:

@mediji(največja širina: 40em) {
.split {
zaslon: flex;
flex-direction: vrstica;
vrzel: 2rem;
 }
}

Na majhnih zaslonih brskalnik vse zloži v en stolpec. Vendar vam tega ni treba določiti, ker brskalnik uporablja prikaz: blok privzeto. Tako ste samo medijske poizvedbe uporabili za dodatno zapletenost.

Torej, namesto da bi dodali zapletenost in potem morali preglasiti kup lastnosti, zdaj dodajate zapletenost, ko jo potrebujete. Večino časa boste potrebovali le najmanjša širina medijske poizvedbe. Najprej začnite z mobilnimi napravami, nato pa, ko bo spletno mesto videti odlično na mobilnih napravah, dodajte zapletenost (npr. stolpce) za namizno različico.

5. Izkoristite prednosti sodobnega CSS

Z uporabo sodobnih pristopov CSS se lahko izognete večini težav s poravnavo in prelomnimi točkami ter se premaknete k doseganju intrinzične zasnove.

Eden od načinov, kako lahko to storite, je:

h1 {velikost pisave: objemka (3rem, 1rem + 10vw, 7rem)}

To pripne h1 med najmanjšo in največjo velikostjo pisave. Najmanjši, do katerega želimo, je 3rem in najvišja je 7rem. Sredina je tisto, kar bomo ponovili (1rem + 10 vw). Posledično se bo naslov samodejno skrčil, ko se bo vidno polje zmanjšalo, in povečal, ko bo postalo večje.

Izvedite več o sodobnem CSS

CSS se je z leti močno razvil. Danes imamo novejše in boljše pristope za pozicioniranje elementov v CSS. V tem članku smo se dotaknili nekaterih od teh praks in izpostavili, kako vam lahko pomagajo pri izogibanju pogostim pastem oblikovanja. Eden najboljših načinov za učenje sodobnega CSS je s praktičnim pristopom, kot je uporaba sodobnega CSS za oblikovanje tabele HTML.