Protsentväärtused eurodes CSS võib olla keeruline. Kui määrate kõrguse CSS-i vara elemendi väärtuseks 100%, milleks sa selle 100% määrad? See on peamine küsimus, mis teil CSS-i protsentide käsitlemisel tekib, ja kui paigutused muutuvad keerukamaks, siis see ka muutub protsentide jälgimine palju raskemaks, mille tulemuseks on lausa veider käitumine, kui te seda ei tee ettevaatlik.
Protsentidega töötamisel on oma kindel eelis; protsendipõhised paigutused kohanduvad automaatselt erinevate ekraanisuurustega. Sellepärast on protsentide kasutamine tundlikus kujunduses hädavajalik. Populaarsed võrgusüsteemid ja CSS-i raamistikud kasutavad reageerivate võrkude loomiseks protsentväärtusi.
On selge, et on teatud olukordi, mis sobivad paremini staatiliste väärtuste jaoks, ja teisi, mis töötavad midagi paremini adaptiivse, näiteks protsentidega. Peate otsustama, millist marsruuti oma kujunduses olevate elementidega valida.
Staatilised ühikud
Pikslid on staatilised. Kümme pikslit ühes seadmes on kümme pikslit igas seadmes. Muidugi on selliseid asju nagu tihedus ja viis, kuidas seade tegelikult pikslit tõlgendab, kuid te ei näe kunagi suuri muudatusi, kuna ekraan on erineva suurusega.
CSS-i abil saate lihtsalt elementi määratleda kõrgus pikslitesja see jääb samaks. See on etteaimatav.
div {
kõrgus: 20px;
}
See ei muutu, kui te ei muuda seda JavaScripti ega muu sarnasega.
Nüüd on sellel mündil veel üks külg. See ei muutu. See tähendab, et peate kõik täpselt mõõtma ja isegi siis ei tööta teie sait kõigis seadmetes. Seepärast kipuvad staatilised üksused paremini töötama lapse elementide, meedia ja asjade puhul, mis venitades ja kasvades hakkavad moonutama ja kummaliselt välja nägema.
Elemendi kõrguse seadmine 100% -le
Kui määrate elemendi kõrguseks 100%, kas see laieneb kogu ekraani kõrgusele? Mõnikord. CSS käsitleb protsentväärtusi alati protsendina vanemelemendist.
Vanemate elemendita
Kui olete loonud värske seda sisaldab ainult teie saidi kehamärgis, võrdub 100% tõenäoliselt ekraani kõrgusega. Seda juhul, kui te pole väärtuse jaoks määranud kõrguse väärtust.
HTML:
CSS:
div {
kõrgus: 100%;
}
Seda elemendi kõrgus võrdub ekraaniga. Vaikimisi on ulatub kogu ekraanist, nii et see on teie brauseri aluseks elemendi kõrguse arvutamisel.
Staatilise kõrgusega vanemelemendiga
Kui teie element on pesastatud teise elemendi sisse, brauser kasutab vanemelemendi kõrgust 100% väärtuse arvutamiseks. Seega, kui teie element asub mõnes teises elemendis, mille kõrgus on 100 pikslit, ja määrate alamelemendi kõrguseks 100%. Lapseelemendi kõrgus on 100 pikslit.
HTML:
CSS:
#parent {
kõrgus: 100px;
}
#child {
kõrgus: 100%;
}
Lapse elemendile saadaolevat kõrgust piirab vanema pikkus.
Protsendikõrguse vanemelemendiga
See võib tunduda vastuoluline, kuid saate määrata elemendi kõrguseks protsendi protsendi. Kui elemendil on vanemelement, mille kõrgus on määratletud ka protsentväärtusena, kasutab brauser vanemaga sama väärtust, mille ta vanema põhjal juba arvutas. Seda seetõttu, et 100% väärtusest on ikkagi see väärtus.
CSS:
#parent {
kõrgus: 75%;
}
#child {
kõrgus: 100%;
}
Sel juhul on vanemelemendi kõrgus 75% kogu ekraanist. Lapsel on siis ka 100% kogu saadaolevast kasvust.
Kõrgema vanemelemendiga
Huvitav on see, et kui vanemelemendil pole määratletud kõrgust, liigub brauser taseme kaupa ülespoole, kuni leiab konkreetse väärtuse, millega saab töötada. Kui see jõuab lõpuni midagi leidmata määrab brauser vaikimisi ekraani kõrguse, andes teie elemendile samaväärse kõrguse.
HTML:
CSS:
#parent {}
#child {
kõrgus: 100%;
}
Lapseelement ulatub kogu ekraani üla- ja alaosani.
Vaateakna ühikud
Kuna protsentuaalsete ühikutega arvutamine võib olla keeruline ja iga element on seotud oma vanemaga, seal on komplekt ühikuid, mis eiravad kõike seda ja põhielementide suurust otse saadaolevalt ekraanilt ruumi. Need on vaateava ühikud ja need annavad teile otsese suuruse sõltuvalt ekraani kõrgusest või laiusest, olenemata elemendi asukohast.
Elemendi määramiseks kõrgus võrdne ekraani kõrgusega, määrake selle kõrguseks väärtus 100vh.
div {
kõrgus: 100vh;
}
Sellega on paigutust lihtne murda ja peate olema teadlik, millised muud elemendid on mõjutatud, kuid vaateaken on kõige otsesem viis määrata elemendi kõrgus 100% -le ekraan.