Uistite sa, že vaše rozloženia plne reagujú s alternatívnou meracou jednotkou.

Nie je to tak dávno, čo sme boli úplne odkázaní na používanie percent pre šírky a výšky. Použitie percent znamenalo, že vaše rozloženie a prvky mohli predpokladať výšku a šírku na základe výrezu. Ale ako sa moderné CSS neustále vyvíjajú, dostali sme sa do bodu, kedy môže byť dokonca dobrý nápad vyhnúť sa používaniu percent.

Prečítajte si o bežných problémoch, s ktorými sa môžete stretnúť pri používaní percent. Zistite tiež o moderných technikách CSS, ktoré je možné použiť namiesto percent. Tieto techniky vám poskytnú rovnaký výsledok ako percentá bez akýchkoľvek nevýhod.

Veľmi jednoduchý príklad mriežky

Ak chcete demonštrovať problém s percentuálnymi jednotkami, zvážte toto rozloženie HTML:

<divtrieda="kontajnermoja-mriežka">
 <divtrieda="mriežka-položka">
div>
 <divtrieda="mriežka-položka">
div>
div>

Vonkajší prvok je základný div kontajnerový prvok s dvoma div deti. Každé dieťa má a mriežka-položka trieda. Ak chcete kontajner zmeniť na mriežku s dvoma stĺpcami (dvemi políčkami), budeme musieť použiť nasledujúci kód CSS:

instagram viewer 

telo {
farba pozadia: čierna;
align-items: stred;
ospravedlniť-obsah: flexibilný štart;
}
.moja mriežka {
displej: mriežka;
mriežka-šablóna-stĺpce: 50% 50%;
marža: 3rem;
hranica: 2pxpevnýzlato;
vypchávka: 1rem;
}
.mriežka-položka {
hranica: 3pxpevnýzlato;
vypchávka: 10rem 0;
pozadie: Modrá;
}

Takže každý stĺpec (položka mriežky) má farbu pozadia zlatú. Na rodičovskej triede kontajnera sme nastavili mriežka-šablóna-stĺpec na 50 % pre každý stĺpec. Výsledkom je, že obe políčka zaberajú 50 % celkovej šírky kontajnerového prvku.

Tu je výsledok:

S týmto zosúladením sú však problémy. Po prvé, ak ste sa rozhodli pridať a medzera k mriežkovému rodičovi by dieťa mohlo pretiecť z boku. Napríklad, ak by ste mali pridať medzera: 3px k .moja mriežka blok v CSS, potom by rozloženie vyzeralo takto:

Ako môžete vidieť na obrázku vyššie, pravá krabica sa presunula z kontajnera. Niekedy si to možno nevšimnete, pretože vaša medzera je dostatočne malá, čo vedie k podivnému problému so zarovnaním. Ale ak ste mali väčšiu medzeru, potom je prekrytie celkom zrejmé.

Kedykoľvek používate percentá a pridávate okraje alebo medzery, existuje veľká šanca, že sa vyskytnú tieto druhy chýb. Ale prečo sa chyba vyskytuje?

Je to preto, že každý stĺpec tvorí 50 % nadradeného stĺpca. Vo vyššie uvedenom príklade máme 50 % plus 50 % plus túto medzeru (3px), ktorá vytlačí krabicu z kontajnera.

Všimnite si, že táto chyba sa nevyskytuje iba pri 50-50. Prvý stĺpec môžete nastaviť na 75 %, druhý stĺpec na 25 % a chyba sa bude stále vyskytovať. Preto musíte nasledujúce riešenie používať častejšie.

Riešenie s čiastkovými hodnotami

Riešením je použitie zlomkových hodnôt namiesto percent. Takže namiesto nastavenia prvého stĺpca na 75 % a druhého na 50 %, môžete nastaviť prvý stĺpec na 3fr a druhý stĺpec na 1fr:

mriežka-šablóna-stĺpce: 3fr 1fr

Toto zachováva rovnaký pomer ako v prvom príklade. Ale výhoda použitia fr jednotiek je, že využívajú zlomok dostupného priestoru. V tomto prípade prvý stĺpec zaberie tri časti priestoru, zatiaľ čo druhý stĺpec zaberie jednu časť, bez medzery.

Ďalšou výhodou použitia frs oproti percentám – alebo iným absolútne jednotky, ako napríklad px alebo em— spočíva v tom, že ich môžete kombinovať s pevnými hodnotami. Tu je príklad:

mriežka-šablóna-stĺpce: 1fr 10rem;

S vyššie uvedeným kódom získate pevnú hodnotu, ktorá sa nikdy nemení bez ohľadu na veľkosť obrazovky. Je to preto, že stĺpec napravo zostane vždy na 10rem, zatiaľ čo stĺpec naľavo zaberie zostávajúce miesto (mínus medzera).

Niekedy vám prejde používanie percent. Musíte ich však používať rozumnými spôsobmi, ktoré sa stále dokážu prispôsobiť situácii. Často to znamená spárovať ich s fr hodnotu.

Realistickejší príklad

Predstavme si, že máte stránku, ktorá obsahuje hlavnú oblasť obsahu a vedľajšiu časť (pre súvisiace príspevky). Oblasť hlavného obsahu zaberá tri časti obrazovky, zatiaľ čo vedľajšia časť zaberá zvyšný priestor mínus medzera:

.kontajner {
šírka: 100%;
displej: mriežka;
mriežka-šablóna-stĺpce: 3fr 1fr;
medzera: 1.5rem;
}
.karta {
farba pozadia: #5A5A5A;
vypchávka: 10px;
okraj-dole: .5rem;
}

Tu je výsledok:

Keď sa obrazovka príliš zúži, zvyčajne presuniete bočný panel (alebo nabok) do spodnej (alebo hornej) časti stránky. To znamená nastavenie mediálnych dopytov, ktoré naskladajú všetko na seba, keď výrez dosiahne určitý bod prerušenia.

Tu je návod, ako môžete všetko naskladať do stĺpca, keď výrez dosiahne 55 em alebo menej:

@media(maximálna šírka: 55 em) {
.kontajner {
displej: flex;
flex-direction: stĺpec;
 }
}

A výsledok bude vyzerať asi takto:

Teraz nechcete, aby každá karta pokrývala šírku celého výrezu. Skôr by sa karty mali zobrazovať vedľa seba. Najlepší spôsob, ako to dosiahnuť, sú mriežky CSS. Ale namiesto nastavenia pevných hodnôt šírky (napríklad 50%) pre stĺpec šablóny mriežky použite opakovať () fungovať nasledovne:

.bočná lišta-mriežka {
displej: mriežka;
mriežka-šablóna-stĺpce: opakovať(automatické prispôsobenie, minmax(25rem, 1fr));
zarovnať-obsah: začať;
medzera: 2rem;
}

Tento CSS stanovuje minimálnu veľkosť 25rem a maximálnu veľkosť 1fr. Tento prístup je oveľa lepší ako nastavenie pevných šírok, pretože sa spolieha na vnútornú veľkosť. Inými slovami, umožňuje prehliadaču zistiť veci na základe dostupných parametrov.

Keď teraz zmenšíte okno prehliadača na určitú šírku, pole mriežky sa automaticky upraví na dva polia na riadok.

Keď sa obrazovka zmenší, klesne na jedno políčko na riadok. Prehliadač teda ukladá všetko na seba. Toto všetko sa deje pri zmene veľkosti okna. Môžete použiť funkciu prehliadača ako napr Chrome DevTools, aby ste pochopili, ako tento CSS fungujea ako zmena veľkosti okien zmení rozloženie.

Najlepšie na tom je, že na to, aby prvok reagoval, nepotrebujete kontajnerový dotaz ani nič iné. Jednoducho nastavte mriežku a použite min-max() nastaviť zlomkové hodnoty namiesto pevných veľkostí.

Zistite viac o CSS Grid

Ak chcete byť skvelí s CSS, musíte mať hlboké znalosti CSS Grids. Mriežky môžu byť pri správnom použití dosť výkonné. Pomocou mriežok môžete dosiahnuť takmer akékoľvek rozloženie, ktoré chcete. To z neho robí nenahraditeľný nástroj v CSS.

Jedna vec, ktorú treba mať na pamäti pri používaní mriežok CSS, je zamerať sa na odozvu. Môžete tiež použiť zlomkový prístup, aby ste sa vyhli prípadom kolízií medzi prvkami. Nezabudnite ovládať mriežky CSS, pretože štýl rozloženia vám pri vytváraní webových stránok nesmierne pomôže.