Kasutage neid näpunäiteid tundlike paigutuste tõhusaks loomiseks.
Kujutage ette, et olete teinud kõik raske töö, et teha tõeliselt lahe paigutus. Kuid kui muudate oma brauseriakna veidi väiksemaks, leiate midagi, mis on ülevoolav. Esitate probleemi lahendamiseks meediapäringu. Kuid akna suurust muutes märkate, et midagi on veel purunenud.
See on midagi, mida enamik CSS-i arendajaid ühel hetkel kogeb. Kuid õnneks on meil mitu moodsat CSS-i lahendust, mis muudavad asjade arendamise ja hästi tööle panemise palju lihtsamaks. Selles artiklis käsitletakse 5 kasulikku tava, mida veebisaitide arendamisel meeles pidada. Need näpunäited aitavad vältida tüütuid katkestusi disainis.
1. Alustage globaalse stiililehega
CSS-i kirjutamisel alustage alati globaalse stiiliga. Ärge muretsege paigutuse pärast. Selle asemel määrake üldised stiilid, nagu tüpograafia, värvid ja taust. Lähtestage veerised, eemaldage linkidelt allakriipsud ja nii edasi.
Kui olete üldise stiiliga lõpetanud, võite alustada paigutuse loomist ja paigutuse üksikute elementide sihtimist. Põhimõtteliselt alustage ülalt ja liikuge seejärel elementidega edasi.
Järgmine CSS-i näide lähtestab kõigi elementide veerise väärtuseks 0, määratleb kõigi peamiste pealkirjade tüpograafia ja värvi ning lisab neile kõigile ühtse veerise:
keha,
h1,
h2,
h3,
lk {
marginaal: 0;
}h1,
h2,
h3 {
värvi: sinine;
font-perekond: "Verdana" sans-serif;
font-weight: 900;
reakõrgus: 1;
}
h2,
h3,
lk {
margin-alumine: 1rem;
}
Nüüd, kui kõik põhistiilid on määratletud, saate sealt edasi ehitada. Näiteks saate konteinerielemendile lisada polsterduse. See lükkab sisu teie brauseri servadest eemale. Seejärel saate taotleda a maksimaalne laius piltidele, et nad saaksid kohaneda oma konteineri laiusega. Enne konkreetsete elementide sihtimist tuleb alustada üldistest elementidest.
Jällegi on paigutus tundlik. Nii et kui muudate ekraani suurust, muutub ka elementide suurus vastavalt. Arendajana peaksite olema neist CSS-i näpunäidetest ja nippidest teadlik kuna need võivad viia teie tootlikkuse järgmisele tasemele.
2. Vältige fikseeritud suurusi
Kui hakkate paigutuse peale mõtlema, peaksite esimese asjana meeles pidama fikseeritud suuruste vältimist. Fikseeritud suurused viitavad sellistele omadustele nagu laius: 1000 pikslit, kõrgus: 200 pikslit, ja nii edasi. Fikseeritud kõrguse või laiuse määramine põhjustab teile probleeme ainult pikas perspektiivis.
Selle asemel kasutage kohandatavat kõrgust ja laiust. Üks võimalus on kasutada min-kõrgus ja min-laius selle asemel kõrgus ja laius. Oletame näiteks, et määrate elemendi laiuseks 600 pikslit. Kui teete väiksemaks kui 600 pikslit, täitub sisu üle:
Selle asemel peaksite vara vahetama laius juurde maksimaalne laius. Koos maksimaalne laius, lubatakse elemendil brauseriakna kitsendamisel kahaneda. Ja kui aken muutub laiaks, laieneb tekst tagasi algse pikkuseni. Siin on tulemus:
See on sama jaoks kõrgus. Oletame näiteks, et määrate kõrgus päise fikseeritud väärtuseni 200 pikslit.
päis {
kõrgus: 200px;
kuva: võre;
koha-esemed: Keskus;
}
See tsentreerib päises kõik suurepäraselt. Kui aga ahendate brauseriakent, voolab sisu lõpuks selle konteinerist välja. Ja seda seetõttu, et määrasite päisele fikseeritud kõrguse.
Üldiselt kõrgus ja laius on mõlemad ohtlikud omadused. Lahenduseks on kasutada kohandatavat kõrgust ja laiust, st min- ja max kõrgusja min- ja maksimaalne laius. Sellistel juhtudel, kui brauser satub olukordadesse, kus sisu pikeneb, kasvab päis sellega kohanemiseks.
See on üks levinumad CSS-i vead, mida peaksite vältima.
3. Pidage meeles, et teie veebisait on vaikimisi tundlik
Pidage meeles, et teie veebisait on tundlik isegi enne, kui kirjutate ühe rea CSS-koodi. See mõtteviis aitab teil vältida disainiprotsessi liigset keerukust. Paigutus töötab massiivsetel ekraanidel ja pisikestel ekraanidel. See ei pruugi olla ilus. Seda võib olla isegi raske suurtelt ekraanidelt lugeda. Kuid veebisait kohandub vaateavaga olenemata selle suurusest.
Muidugi võivad pildid üle voolata ja tekst võib olla liiga väike. Kuid vaikepaigutusega ei kaota te midagi. Teie tekst ei purune ja kõik elemendid on ekraanil nähtavad.
Selle fakti mõistmine ja omaksvõtmine võib CSS-koodi kirjutamisel tõesti aidata. Kui teil tekib probleeme, olete kindel, et viga tuleneb teie kirjutatud CSS-ist. See muudab probleemi leidmise ja parandamise lihtsamaks.
Proovige kasutada meediumipäringuid ainult keerukuse suurendamiseks. Näiteks kui soovite, et teie paigutusel oleks suurematel ekraanidel kolm veergu. Vastasel juhul ärge neid kasutage. Meediapäringutesse süvenemiseks lugege meie artiklit meediapäringute juhend.
Siin on üks stsenaarium. Kujutage ette, et element, mille klassi nimi on .poolitatud sisaldab kolme elementi. Järgmise CSS-iga luuakse kolme veeruga paigutus:
.lõhestada {
kuva: painduv;
painduv suund: rida;
lõhe: 2rem;
}
Väiksematel ekraanidel (40 em lai või väiksem), tahaksite, et kõik hõivaks ühe veeru. Nii et sa teeksid seda:
@meedia(maksimaalne laius: 40 em) {
.lõhestada {
kuva: blokk;
}
}
Siin alistate vaikejoonduse (kolm veergu). Kuid meediumipäring pole vajalik, kuna brauser kasutab kuva: plokk algselt. Nii et te ei pea seda selgelt määratlema.
Seda silmas pidades võite oma koodi ümber kujundada nii, et see kasutaks ühte meediumipäringut, mis kehtib ainult suurte ekraanide puhul. Seal lülitute kolmele veerule, kui ekraan on laiem kui 40 em:
@meedia(maksimaalne laius: 40 em) {
.lõhestada {
kuva: painduv;
painduv suund: rida;
lõhe: 2rem;
}
}
Väikestel ekraanidel virnastab brauser kõik ühte veergu. Kuid te ei pea seda määrama, kuna brauser kasutab kuva: plokk algselt. Seega olete meediumipäringuid kasutanud ainult keerukuse suurendamiseks.
Nii et selle asemel, et lisada keerukust ja seejärel alistada hulk omadusi, lisate nüüd keerukust, kui seda vajate. Enamasti läheb teil vaja ainult min-laius meedia päringud. Alustage esmalt mobiilist, seejärel kui sait näeb mobiilis suurepärane välja, lisage arvutiversiooni keerukus (nt veerud).
5. Kasutage kaasaegset CSS-i ära
Kasutades kaasaegseid CSS-i lähenemisviise, saate enamikust joondusprobleemidest ja murdepunktidest eemale ning liikuda sisemise disaini saavutamise poole.
Üks viis, kuidas saate seda teha, on:
h1 { font-size: clamp (3rem, 1rem + 10vw, 7rem)}
See kinnitab h1 minimaalse ja maksimaalse kirjasuuruse vahel. Väikseim, milleni me seda soovime, on 3rem ja kõrgeim on 7rem. Keskmist kordame üle (1rem + 10 vw). Selle tulemusel kahaneb pealkiri automaatselt, kui vaateava väheneb, ja kasvab, kui see suureneb.
Lisateave kaasaegse CSS-i kohta
CSS on aastate jooksul palju arenenud. Täna on meil uuemad ja paremad lähenemisviisid elementide positsioneerimiseks CSS-is. Selles artiklis käsitlesime mõnda neist tavadest ja tõime esile, kuidas need aitavad teil vältida levinud disainilõkse. Üks parimaid viise kaasaegse CSS-i õppimiseks on praktiline lähenemine, näiteks kaasaegse CSS-i kasutamine HTML-tabeli kujundamiseks.
