Probleem CSS-i protsentidega

Mitte kaua aega tagasi sõltusime täielikult laiuse ja kõrguse protsentide kasutamisest. Protsentide kasutamine tähendas, et teie paigutus ja elemendid võisid vaateava põhjal võtta kõrguse ja laiuse. Kuid kuna kaasaegne CSS areneb edasi, oleme jõudnud punkti, kus võib olla isegi hea mõte protsentide kasutamist vältida.

Siit saate teada, millised probleemid protsentide kasutamisel kokku puutuvad. Siit saate teada ka kaasaegsete CSS-i tehnikate kohta, mida kasutada protsentide asemel. Need tehnikad annavad teile sama tulemuse kui protsentides ilma puudusteta.

Väga lihtne ruudustiku näide

Protsendiühikutega seotud probleemi demonstreerimiseks kaaluge järgmist HTML-i paigutust:

<divklass="konteinerminu-võrk">
 <divklass="ruudustik">
div>
 <divklass="ruudustik">
div>
div>

Väline element on põhielement div konteineri element kahega div lapsed. Igal lapsel on a ruudustik klass. Konteiner kahe veeruga (kahe kastiga) ruudustikuks muutmiseks peame rakendama järgmise CSS-koodi:

keha {
taustavärv: must;
joondada-üksused: Keskus;
õigustama-sisu: flex-start;
}
.minu ruudustik {
kuva: võre;
ruudustik-mall-veerud: 50% 50%;
marginaal: 3rem;
piir: 2pxtahkekullast;
polsterdus: 1rem;
}
.ruudustik {
piir: 3pxtahkekullast;
polsterdus: 10rem 0;
taustal: sinine;
}

Seega on igal veerul (ruudustikuelemendil) kuldne taustavärv. Konteineri vanemklassis määrasime ruudustik-mall-veerg kuni 50% iga veeru kohta. Selle tulemusena võtavad mõlemad kastid 50% konteineri elemendi kogulaiusest.

Siin on tulemus:

Kuid selle joondamisega on probleeme. Esiteks, kui otsustasite lisada a lõhe võrevanemale võib laps küljelt üle voolata. Näiteks kui peaksite lisama vahe: 3 pikslit juurde .minu ruudustik blokki CSS-is, siis näeks paigutus välja järgmine:

Nagu näete ülaloleval pildil, on parempoolne kast konteinerist välja kolinud. Mõnikord ei pruugi te seda märgata, kuna teie vahe on piisavalt väike, mille tulemuseks on kummaline joondusprobleem. Kuid kui teil oli suurem vahe, muutub kattumine üsna ilmseks.

Iga kord, kui kasutate protsente ja lisate marginaale või lünki, on selliseid vigu suur tõenäosus. Aga miks viga ilmneb?

Põhjus on selles, et iga veerg moodustab 50% vanemast. Ülaltoodud näites on meil 50% pluss 50% pluss see vahe (3px), mis lükkab kasti konteinerist välja.

Pange tähele, et see viga ei esine ainult 50-50 puhul. Saate määrata esimese veeru väärtuseks 75%, teise veeru väärtuseks 25% ja viga ilmneb endiselt. Seetõttu peate sagedamini kasutama järgmist lahendust.

Lahendus murdarvudega

Lahenduseks on kasutada protsentide asemel murdarvu. Selle asemel, et määrata esimese veeru väärtuseks 75% ja teiseks 50%, saate määrata esimese veeru väärtuseks 3fr ja teise veeru väärtuseks 1fr:

ruudustik-mall-veerud: 3fr 1fr

See säilitab sama suhte nagu esimeses näites. Kuid kasutamise eelis fr ühikut on see, et nad kasutavad murdosa saadaolevast ruumist. Sel juhul võtab esimene veerg ruumist kolm osa, teine ​​veerg aga ühe osa, ilma tühikuta.

Veel üks frs-i kasutamise eelis protsentide või muu ees absoluutsed ühikud, nagu px või em— on see, et saate neid kombineerida fikseeritud väärtustega. Siin on näide:

ruudustik-mall-tulbad: 1fr 10rem;

Ülaltoodud koodiga saate fikseeritud väärtuse, mis ei muutu kunagi olenemata ekraani suurusest. Selle põhjuseks on asjaolu, et parempoolne veerg jääb alati 10 remi juurde, samas kui vasakpoolne veerg hõivab ülejäänud ruumi (miinus vahe).

Mõnikord võite protsentide kasutamisest pääseda. Kuid peate neid kasutama nutikal viisil, mis suudab siiski olukorraga kohaneda. Sageli tähendab see nende sidumist an fr väärtus.

Realistlikum näide

Kujutagem ette, et teil on leht, mis sisaldab põhisisuala ja kõrvalt (seotud postituste jaoks). Põhisisuala võtab enda alla kolm osa ekraanist, kõrvalosa aga ülejäänud ruumi, millest on maha arvatud vahe:

.konteiner {
laius: 100%;
kuva: võre;
ruudustik-mall-veerud: 3fr 1fr;
lõhe: 1.5rem;
}
.kaart {
taustavärv: #5A5A5A;
polsterdus: 10px;
marginaal-alumine: .5rem;
}

Siin on tulemus:

Tavaliselt liigutate külgriba (või kõrvale) lehe alla (või ülaosasse), kui ekraan muutub liiga kitsaks. See tähendab meediumipäringute seadistamist, mis asetavad kõik üksteise peale, kui vaateava jõuab teatud katkestuspunkti.

Kui vaateava on 55 em või vähem, saate kõik veergu virnastada järgmiselt.

@meedia(maksimaalne laius: 55 em) {
.konteiner {
kuva: painduv;
painduv suund: veerg;
 }
}

Ja tulemus näeb välja umbes selline:

Nüüd te ei soovi, et iga kaart ulatuks kogu vaateava laiusele. Pigem peaksid kaardid kuvama kõrvuti. Parim viis selle saavutamiseks on CSS-i ruudustikud. Kuid selle asemel, et määrata ruudustiku malli veeru jaoks fikseeritud laiuse väärtused (nt 50%), kasutage korda () toimima järgmiselt:

.sidebar-grid {
kuva: võre;
ruudustik-mall-veerud: korda(automaatne sobitamine, minmax(25rem, 1fr));
joondada-sisu: alustada;
lõhe: 2rem;
}

See CSS määrab minimaalseks suuruseks 25 rem ja maksimaalseks suuruseks 1 fr. See lähenemine on palju parem kui fikseeritud laiuste määramine, kuna see tugineb sisemisele suurusele. Teisisõnu võimaldab see brauseril saadaolevate parameetrite põhjal asju välja mõelda.

Nüüd, kui vähendate brauseriakna kindlale laiusele, kohandub ruudustikukast automaatselt kahele kastile rea kohta.

Kui ekraan muutub väiksemaks, väheneb see ühe kastini rea kohta. Seega paneb brauser kõik üksteise peale. Kõik see juhtub akna suuruse muutmisel. Saate kasutada brauseri funktsiooni nagu Chrome DevTools, et mõista, kuidas see CSS töötabja kuidas akende suuruse muutmine muudab paigutust.

Parim osa on see, et elemendi tundlikuks muutmiseks pole vaja konteineripäringut ega midagi uhket. Lihtsalt määrake ruudustik ja kasutage min-max () fikseeritud suuruste asemel murdarvude määramiseks.

Lisateave CSS-võrgu kohta

Kui soovite CSS-iga suurepäraselt hakkama saada, peavad teil olema sügavad teadmised CSS-võrkudest. Võred võivad hästi kasutamisel olla üsna võimsad. Võrkude abil saate saavutada peaaegu iga soovitud paigutuse. See muudab selle CSS-is asendamatuks tööriistaks.

Üks asi, mida CSS-võrkude kasutamisel meeles pidada, on keskenduda reageerimisvõimele. Elementide kokkupõrgete vältimiseks võite kasutada ka murdosa lähenemist. Ärge unustage meisterdada CSS-võrke, sest paigutusstiil aitab teid veebisaitide loomisel tohutult.