Zjednodušte své šablony stylů pomocí kouzelných jednotek zobrazení CSS

Jednotky Viewport jsou k dispozici již několik let, ale opravdu jsme je neviděli, aby si moc zvykly. Nyní jsou podporovány všemi hlavními prohlížeči (caniuse) a nabízejí jedinečné funkce, které mohou být velmi užitečné v konkrétních situacích, zejména v těch, které zahrnují responzivní design.

Představujeme jednotky výřezu

Viewport je oblast vašeho prohlížeče, kde se zobrazuje aktuální obsah – jinými slovy váš webový prohlížeč bez panelů nástrojů a tlačítek. Jednotky jsou vw , vh , vmin a vmax . Všechny představují procento rozměrů prohlížeče (výřezu) a odpovídajícím způsobem se mění při změně velikosti okna.

Řekněme, že máme zobrazenou oblast 1000 pixelů (šířka) x 800 pixelů (výška):

  • vw - Představuje 1 % šířky výřezu. V našem případě 50vw =500px.
  • vh - Procento výšky okna. 50vh =400px.
  • vmin - Procento z minima ze dvou. V našem příkladu 50vmin =400px, protože jsme v režimu na šířku.
  • vmax - Procento větší dimenze. 50vmax =500px.

Tyto jednotky můžete použít kdekoli, kde můžete zadat hodnotu v pixelech, jako v width , height , margin , font-size a více. Prohlížeč je přepočítá při změně velikosti okna nebo otočení zařízení.

1. Zabírá celou výšku stránky

Každý vývojář frontendu se s tím v té či oné chvíli potýkal. Váš první instinkt je udělat něco takového:

#elem{
    height: 100%;
}

To však nebude fungovat, pokud k tělu nepřidáme výšku 100 %. a html také, což není příliš elegantní a mohlo by narušit zbytek vašeho designu. S vh to je docela snadné. Stačí nastavit jeho výšku na 100vh a vždy bude vysoké jako vaše okno.

#elem{
    height: 100vh;
}

To je ideální pro ty obrázky hrdinů na celé obrazovce, které se zdají být v dnešní době trendy.

2. Podřízená velikost vzhledem k prohlížeči, nikoli nadřazenémuu

V určitých situacích budete chtít změnit velikost podřízeného prvku vzhledem k oknu a ne jeho nadřazenému prvku. Podobně jako v předchozím příkladu to nebude fungovat:

#parent{
    width: 400px;
}
#child{ 
    /* This is equal to 100% of the parent width, not the whole page. */ 
    width: 100%; 
}

Pokud použijeme vw místo toho náš podřízený prvek jednoduše přeteče nadřazený prvek a zabere celou šířku stránky:

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of page, regardless of the parent size. */
    width: 100vw;
}

3. Velikost responzivního písma

Jednotky výřezu lze použít i na text! V tomto příkladu jsme nastavili velikost písma na vw vytvoření úžasné odezvy textu v jednom řádku CSS. Sbohem Fittexte!

h2.responsive-text{
    font-size: 6vw;
}
h4.responsive-text{
    font-size: 3vw;
}

4. Responzivní vertikální centrování

Nastavením šířky, výšky a okrajů prvku v jednotkách výřezu jej můžete vycentrovat bez použití dalších triků.

Zde má tento obdélník výšku 60vh a horní a dolní okraj 20vh , což dohromady činí 100vh (60 + 2*20), díky čemuž bude vždy vycentrováno, a to i při změně velikosti okna.

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

5. Sloupce stejné šířky

Jednotky výřezu můžete použít k vytváření responzivních mřížek. Chovají se podobně jako procentuální, ale vždy budou mít velikost vzhledem k výřezu. Můžete je tedy například umístit do nadřazeného prvku, který je širší než okno, a přesto si mřížka zachová správnou šířku. To se může hodit při vytváření posuvníků na celou obrazovku.

Tato technika vyžaduje, aby prvky měly float:left; pro zarovnání prvků vedle sebe:

.column-2{
    float: left;
    width: 50vw;
}
.column-4{
    float: left;
    width: 25vw;
}
.column-8{
    float: left;
    width: 12.5vw;
}

Závěr

Výhledové jednotky mají své využití a vyplatí se s nimi experimentovat. Jsou snadno pochopitelné a mohou být mimořádně užitečné v určitých scénářích, kde bude implementace řešení s alternativními technikami CSS obtížnější nebo nemožná.