Težava z odstotki v CSS

Nedolgo nazaj smo bili popolnoma odvisni od uporabe odstotkov za širine in višine. Uporaba odstotkov je pomenila, da lahko vaša postavitev in elementi prevzamejo višino in širino glede na vidno polje. Ker pa se sodobni CSS še naprej razvija, smo prišli do točke, ko bi se bilo morda celo dobro izogibati uporabi odstotkov.

Spoznajte pogoste težave, na katere boste naleteli pri uporabi odstotkov. Pozanimajte se tudi o sodobnih tehnikah CSS, ki jih lahko uporabite namesto odstotkov. Te tehnike vam bodo dale enak rezultat kot odstotki brez kakršnih koli pomanjkljivosti.

Primer zelo preproste mreže

Za predstavitev težave z odstotnimi enotami razmislite o tej postavitvi HTML:

<divrazred="posodamoja mreža">
 <divrazred="mrežni element">
div>
 <divrazred="mrežni element">
div>
div>

Zunanji element je osnovni div kontejnerski element z dvema div otroci. Vsak otrok ima a mrežni element razred. Če želite vsebnik spremeniti v mrežo z dvema stolpcema (dvema poljema), bomo morali uporabiti naslednjo kodo CSS:

telo {
Barva ozadja: Črna;
align-items: center;
justify-content: flex-start;
}
.my-grid {
zaslon: mreža;
mreža-predloga-stolpci: 50% 50%;
marža: 3rem;
meja: 2pxtrdnazlato;
oblazinjenje: 1rem;
}
.grid-item {
meja: 3pxtrdnazlato;
oblazinjenje: 10rem 0;
ozadje: modra;
}

Tako ima vsak stolpec (postavka mreže) zlato barvo ozadja. Na nadrejenem razredu vsebnika nastavimo mreža-predloga-stolpec do 50 % za vsak stolpec. Posledično obe škatli zavzameta 50 % celotne širine vsebniškega elementa.

Tukaj je rezultat:

Toda s to uskladitvijo obstajajo težave. Prvič, če ste se odločili dodati a vrzel staršu mreže, lahko otrok prelije stran. Na primer, če bi dodali vrzel: 3px do .my-grid blok v CSS, potem bi postavitev izgledala takole:

Kot lahko vidite na zgornji sliki, se je desno polje premaknilo iz vsebnika. Včasih tega morda ne boste opazili, ker je vaša vrzel dovolj majhna, kar povzroči čudno težavo s poravnavo. Če pa ste imeli večjo vrzel, postane prekrivanje povsem očitno.

Kadar koli uporabljate odstotke in dodajate robove ali vrzeli, obstaja velika verjetnost, da boste naleteli na tovrstne napake. Toda zakaj pride do napake?

To je zato, ker je vsak stolpec 50 % nadrejenega. V zgornjem primeru imamo 50% plus 50% plus tisto vrzel (3px), ki potisne škatlo iz vsebnika.

Upoštevajte, da se ta napaka ne zgodi samo pri 50-50. Prvi stolpec lahko nastavite na 75 %, drugi stolpec na 25 % in napaka se bo še vedno pojavljala. Zato morate pogosteje uporabljati naslednjo rešitev.

Rešitev z ulomki

Rešitev je uporaba ulomkov namesto odstotkov. Namesto da nastavite prvi stolpec na 75 % in drugega na 50 %, lahko nastavite prvi stolpec na 3fr in drugi stolpec na 1fr:

mreža-predloga-stolpci: 3fr 1fr

To ohranja enako razmerje kot prvi primer. Toda prednost uporabe fr enot je, da uporabljajo le del razpoložljivega prostora. V tem primeru bo prvi stolpec zavzel tri dele prostora, medtem ko bo drugi stolpec zavzel en del, brez vrzeli.

Še ena prednost uporabe frs pred odstotki – ali kaj drugega absolutne enote, kot sta px ali em—je, da jih lahko kombinirate s fiksnimi vrednostmi. Tukaj je primer:

mreža-predloga-stolpci: 1fr 10rem;

Z zgornjo kodo boste dobili fiksno vrednost, ki se nikoli ne spremeni ne glede na velikost zaslona. To je zato, ker bo stolpec na desni vedno ostal na 10 rem, medtem ko bo stolpec na levi zasedel preostali prostor (brez vrzeli).

Včasih se lahko izognete uporabi odstotkov. Vendar jih morate uporabiti na pametne načine, ki se še vedno lahko prilagodijo situaciji. Pogosto to pomeni, da jih združite z fr vrednost.

Bolj realističen primer

Predstavljajmo si, da imate stran, ki obsega glavno vsebino in stran (za povezane objave). Področje glavne vsebine zavzema tri dele zaslona, ​​medtem ko stransko območje zavzema preostali prostor brez vrzeli:

.posoda {
premer: 100%;
zaslon: mreža;
mreža-predloga-stolpci: 3fr 1fr;
vrzel: 1.5rem;
}
.kartica {
Barva ozadja: #5A5A5A;
oblazinjenje: 10px;
margin-bottom: .5rem;
}

Tukaj je rezultat:

Običajno premaknete stransko vrstico (ali stran) na dno (ali vrh) strani, ko postane zaslon preozek. To pomeni nastavitev medijskih poizvedb, ki nalagajo vse drugo na drugo, ko vidno polje doseže določeno prelomno točko.

Tukaj je opisano, kako lahko vse zložite v stolpec, ko vidno polje doseže 55 em ali manj:

@mediji(največja širina: 55em) {
.posoda {
zaslon: flex;
flex-direction: stolpec;
 }
}

In rezultat bo videti nekako takole:

Zdaj ne želite, da vsaka kartica obsega širino celotnega vidnega polja. Namesto tega naj bodo kartice prikazane ena poleg druge. Najboljši način za dosego tega so mreže CSS. Toda namesto nastavitve fiksnih vrednosti širine (npr. 50 %) za stolpec-predloge mreže uporabite ponovi () deluje kot sledi:

.sidebar-grid {
zaslon: mreža;
mreža-predloga-stolpci: ponovite(samodejno prilagajanje, minmax(25rem, 1fr));
poravnati vsebino: začetek;
vrzel: 2rem;
}

Ta CSS nastavi najmanjšo velikost 25rem in največjo velikost 1fr. Ta pristop je veliko boljši od nastavljanja fiksnih širin, ker se opira na lastno velikost. Z drugimi besedami, brskalniku omogoča, da ugotovi stvari na podlagi razpoložljivih parametrov.

Zdaj, ko zmanjšate okno brskalnika na določeno širino, se polje mreže samodejno znova prilagodi na dva polja na vrstico.

Ko se zaslon zmanjša, se zmanjša na eno polje na vrstico. Brskalnik torej vse nalaga eno na drugo. Vse to se zgodi, ko spremenite velikost okna. Uporabite lahko funkcijo brskalnika, kot je Chrome DevTools, da razumete, kako deluje ta CSSin kako spreminjanje velikosti oken spremeni postavitev.

Najboljši del je, da ne potrebujete vsebniške poizvedbe ali česa posebnega, da bi bil element odziven. Preprosto nastavite mrežo in uporabite min-max() za nastavitev delnih vrednosti namesto fiksnih velikosti.

Izvedite več o mreži CSS

Če želite biti odlični s CSS, morate dobro poznati mreže CSS. Mreže so lahko precej zmogljive, če se dobro uporabljajo. Z uporabo mrež lahko dosežete skoraj vsako postavitev, ki jo želite. Zaradi tega je nepogrešljivo orodje v CSS.

Pri uporabi mrež CSS morate upoštevati eno stvar, da se osredotočite na odzivnost. Uporabite lahko tudi frakcijski pristop, da se izognete primerom trkov med elementi. Ne pozabite obvladati mrež CSS, ker vam bo slog postavitve v veliko pomoč pri ustvarjanju spletnih mest.