5 noderīgi padomi adaptīvu izkārtojumu izveidei

Iedomājieties, ka esat paveicis visu smago darbu, lai izveidotu patiešām foršu izkārtojumu. Bet tad, kad jūs nedaudz samazinat pārlūkprogrammas logu, jūs atradīsiet kaut ko, kas ir pārpildīts. Jūs iesniedzat multivides vaicājumu, lai novērstu problēmu. Taču, mainot loga izmēru, pamanāt, ka ir salūzis vēl kas.

Tas ir kaut kas, ko lielākā daļa CSS izstrādātāju piedzīvos vienā brīdī. Bet, par laimi, mums ir vairāki mūsdienīgi CSS risinājumi, kas padara daudz vienkāršāku lietu izstrādi un pareizu darbību. Šajā rakstā ir apskatītas 5 noderīgas prakses, kas jāpatur prātā, izstrādājot vietnes. Šie padomi palīdzēs jums izvairīties no kaitinošiem pārtraukumiem jūsu dizainā.

1. Sāciet ar globālu stila lapu

Rakstot CSS, vienmēr sāciet ar globālo stilu. Neuztraucieties par izkārtojumu. Tā vietā iestatiet vispārīgus stilus, piemēram, tipogrāfiju, krāsas un fonus. Atiestatiet piemales, noņemiet pasvītrojumus no saitēm un tā tālāk.

Kad esat pabeidzis vispārējo stilu, varat sākt veidot izkārtojumu un atlasīt atsevišķus izkārtojuma elementus. Būtībā sāciet no augšas un pēc tam pārejiet pie elementiem.

Tālāk sniegtajā CSS piemērā visu elementu piemale tiek atiestatīta uz 0, tiek definēta visu galveno virsrakstu tipogrāfija un krāsa un visiem tiem tiek pievienota konsekventa piemale:

ķermeni,
h1,
h2,
h3,
lpp {
starpība: 0;
}
h1,
h2,
h3 {
krāsa: zils;
fontu ģimene: "Verdana" sans serif;
fonta svars: 900;
līnijas augstums: 1;
}
h2,
h3,
lpp {
piemale-apakšā: 1rem;
}

Tagad, kad ir definēti visi bāzes stili, varat veidot no turienes. Piemēram, konteinera elementam varat pievienot polsterējumu. Tādējādi saturs tiks novirzīts no pārlūkprogrammas malām. Pēc tam varat pieteikties a maksimālais platums attēliem, lai tie varētu pielāgoties konteinera platumam. Būtība ir sākt no vispārīgiem elementiem, pirms tiek atlasīti konkrēti elementi.

Atkal izkārtojums būs atsaucīgs. Tātad, mainot ekrāna izmēru, elementu lielums attiecīgi mainīsies. Kā izstrādātājam jums jāzina šie CSS padomi un ieteikumi jo tie var paaugstināt jūsu produktivitāti uz nākamo līmeni.

2. Izvairieties no fiksētiem izmēriem

Kad sākat domāt par izkārtojumiem, pirmā lieta, kas jums jāpatur prātā, ir izvairīties no fiksētiem izmēriem. Fiksētie izmēri attiecas uz tādām īpašībām kā platums: 1000 pikseļi, augstums: 200 pikseļi, un tā tālāk. Fiksēta augstuma vai platuma iestatīšana radīs problēmas tikai tālsatiksmes laikā.

Tā vietā izmantojiet pielāgojamus augstumus un platumus. Viens veids ir izmantot min-augstums un min-platums tā vietā augstums un platums. Piemēram, pieņemsim, ka iestatāt elementa platumu uz 600 pikseļiem. Ja samazināsit izmēru par 600 pikseļiem, saturs tiks pārpildīts:

Tā vietā jums vajadzētu mainīt īpašumu no platums uz maksimālais platums. Ar maksimālais platums, elementam tiks atļauts sarukt, kad pārlūkprogrammas logs tiks sašaurināts. Un, ja logs kļūst plats, teksts tiks paplašināts līdz tā sākotnējam garumam. Lūk, rezultāts:

Tas ir tas pats priekš augstums. Piemēram, pieņemsim, ka esat iestatījis augstums no galvenes uz fiksētu vērtību 200 pikseļi.

galvene {
augstums: 200px;
displejs: režģis;
vietas priekšmeti: centrs;
}

Tas lieliski centrē visu galvenē. Bet, sašaurinot pārlūkprogrammas logu, saturs galu galā izplūdīs no konteinera. Un tas ir tāpēc, ka esat iestatījis fiksētu galvenes augstumu.

Parasti augstums un platums abas ir bīstamas īpašības. Risinājums ir izmantot pielāgojamo augstumu un platumu, t.i., min- un maksimālais augstums, un min- un maksimālais platums. Šādos gadījumos, ja pārlūkprogramma nonāk situācijās, kad saturs kļūst garāks, galvene pieaugs, lai pielāgotos tam.

Šis ir viens no Visbiežāk sastopamās CSS kļūdas, no kurām jums vajadzētu izvairīties.

3. Atcerieties, ka jūsu vietne pēc noklusējuma ir atsaucīga

Ņemiet vērā, ka jūsu vietne ir adaptīva pat pirms vienas CSS koda rindiņas rakstīšanas. Šis domāšanas veids var palīdzēt izvairīties no pārmērīgas projektēšanas procesa sarežģīšanas. Izkārtojums darbosies uz lieliem ekrāniem un maziem ekrāniem. Tas varētu nebūt skaisti. To var būt pat grūti lasīt uz lielajiem ekrāniem. Taču vietne pielāgojas skata logam neatkarīgi no tā lieluma.

Protams, attēli var pārpildīt, un teksts var būt pārāk mazs. Bet jūs neko nezaudēsit, izmantojot noklusējuma izkārtojumu. Jūsu teksts nesadalīsies, un visi elementi būs redzami ekrānā.

Šī fakta izpratne un pieņemšana var patiešām palīdzēt, rakstot CSS kodu. Ja radīsies problēmas, būsiet pārliecināts, ka kļūdas cēlonis ir jūsu rakstītais CSS. Tādējādi ir vieglāk atrast problēmu un to novērst.

Mēģiniet izmantot multivides vaicājumus tikai, lai palielinātu sarežģītību. Piemēram, ja vēlaties, lai izkārtojumā būtu trīs kolonnas lielākos ekrānos. Pretējā gadījumā nelietojiet tos. Lai iegūtu dziļu informāciju par mediju jautājumiem, izlasiet mūsu multivides vaicājumu rokasgrāmata.

Šeit ir viens scenārijs. Iedomājieties, ka elements ar klases nosaukumu .sadalīt tajā ir trīs elementi. Izmantojot šādu CSS, tiks izveidots trīs kolonnu izkārtojums:

.sadalīt {
displejs: flex;
flex-virziens: rinda;
plaisa: 2rem;
}

Mazākos ekrānos (40 em plats vai mazāks), jūs vēlaties, lai viss aizņemtu vienu kolonnu. Tātad jūs darītu tā:

@media(maksimālais platums: 40 em) {
.sadalīt {
displejs: bloķēt;
 }
}

Šeit jūs ignorējat noklusējuma līdzinājumu (trīs kolonnas). Taču multivides vaicājums nav vajadzīgs, jo pārlūkprogramma izmanto displejs: bloks pēc noklusējuma. Tāpēc jums tas nav skaidri jādefinē.

Paturot to prātā, varat pārveidot savu kodu, lai izmantotu vienu multivides vaicājumu, kas attiecas tikai uz lieliem ekrāniem. Kad ekrāns ir platāks par 40 em, jūs pārslēgsities uz trim kolonnām:

@media(maksimālais platums: 40 em) {
.sadalīt {
displejs: flex;
flex-virziens: rinda;
plaisa: 2rem;
 }
}

Mazos ekrānos pārlūkprogramma visu saliek vienā kolonnā. Bet jums tas nav jānorāda, jo pārlūkprogramma izmanto displejs: bloks pēc noklusējuma. Tādējādi jūs esat izmantojis tikai multivides vaicājumus, lai palielinātu sarežģītību.

Tātad, tā vietā, lai pievienotu sarežģītību un pēc tam būtu jāignorē vairāki rekvizīti, jūs tagad pievienojat sarežģītību, kad tas ir nepieciešams. Lielāko daļu laika jums būs nepieciešams tikai min-platums mediju vaicājumi. Vispirms sāciet ar mobilajām ierīcēm, pēc tam, kad vietne izskatās lieliski mobilajās ierīcēs, pievienojiet datora versijai sarežģītību (piem., kolonnas).

5. Izmantojiet mūsdienu CSS priekšrocības

Izmantojot modernās CSS pieejas, varat atbrīvoties no vairuma izlīdzināšanas problēmu un pārtraukuma punktu un virzīties uz raksturīgo dizainu.

Viens veids, kā to izdarīt, ir:

h1 {fonta izmērs: skava (3rem, 1rem + 10vw, 7rem)}

Tas nostiprina h1 starp minimālo un maksimālo fonta lielumu. Mazākais, uz kuru mēs vēlamies, lai tas nonāktu 3rem un augstākais ir 7rem. Vidus ir tas, ko mēs atkārtosim (1rem + 10 vw). Rezultātā virsraksts automātiski samazināsies, kad skata logs kļūst mazāks, un pieaugs, kad tas kļūst lielāks.

Uzziniet vairāk par mūsdienu CSS

CSS gadu gaitā ir daudz attīstījies. Šodien mums ir jaunākas un labākas pieejas elementu pozicionēšanai CSS. Šajā rakstā mēs pieskārāmies dažām no šīm praksēm un uzsvērām, kā tās var palīdzēt izvairīties no bieži sastopamām dizaina kļūmēm. Viens no labākajiem veidiem, kā apgūt moderno CSS, ir praktiskā pieeja, piemēram, izmantojot modernu CSS, lai izstrādātu HTML tabulu.