Sestavte adaptivní rozvržení bez médií

Sep 17, 2025

jak

Dlouho jsem se snažil dosáhnout dokonalé vizuální kompozice na webových stránkách. Měl jsem spoustu bolesti s CSS zarážkami v mé každodenní práci a nikdy nebyl spokojen se společnými způsoby manipulace s reagujícím uspořádáním. Nedávno jsem objevil velmi chladný Reagovat web design Trik, který dělá vše jednoduché, konzistentní a logické, a já jsem s vámi sdílet.

Tento článek je především o kreativním vývoji, takže je to pro oba: předních koncových vývojářů, kteří by mohli najít tuto techniku užitečnou a web designéři, kteří by měli mít obecné chápání webové produkce a jak zlepšit konečný výstup. Předpokládám, že už víte o CSS, zarážkách a mediálních dotazech.

Sestavte blog s mřížkou a flexboxem

Tradiční způsob

Adaptive layouts: breakpoints — Zarážky mohou vést k neuspokojivým výsledkům pro nestandardní výřezy

Přenosná zařízení převezují svět. Řada všech druhů zařízení mění způsob, jakým vytváříme webové stránky. "Responzivá webová stránka" většina lidí předpokládá pouze stolní a mobilní verze (někdy pracovní plocha, tablet, mobilní). Tak to funguje tradičně:

 H1 {
Velikost písma: 80px;
}
.container {
šířka: 980px;
marže: 0 auto;
}

@Media (max-šířka: 1023px) {
H1 {
Velikost písma: 48px;
}
.container {
Šířka: Auto;
Polstrování: 0 30px;
}
}

Ve skutečnosti, obvykle rozložení webových stránek Vidíme, že to není pro naše zařízení. Podívejme se například, jak upravíme velikost písma & lt; H1 & gt; titul:

Adaptive layouts — S jen jedním zarážkami můžete skončit s divadly pohledy

Vidíte, náš & lt; h1 & gt; Název má "velikost písma: 48px" na šířce 320px a 800px a "velikost písma: 80px" na 1024px a 2560Px.

Samozřejmě můžeme přidat více zarážek, ale počet různých zařízení je nespočet! To bude dělat design specifikace velmi komplikované a matoucí, protože je těžké vědět, která hodnota je aplikována na kterou obrazovku.

Adaptive layouts: font size — Nikdy nemůžete vytvořit dostatek zarážek, abyste si velikost písma dokonalá na každé obrazovce

To, co opravdu potřebujeme, je to:

Jednotky výřezu

Adaptive layouts: viewpoint units — Služby výřezu zlepšují záležitosti, ale stále potřebují práci

Řešení tohoto problému zahrnuje výhledové jednotky VW a VH. Jedná se o délkové jednotky představující 1/100 šířky / výšky výřezu (široce podporované prohlížeči z IE9 +).

Můžeme tyto přizpůsobit vlastnosti webové stránky podle jeho velikosti. Situace bude trochu lepší, ale bolest je stále stejná:

 H1 {
Velikost písma: Calc (80/10020) * 100VW;
}
.container {
Šířka: 80VW;
marže: 0 auto;
}

@Media (max-šířka: 1023px) {
H1 {
Velikost písma: Calc (48/375) * 100VW;
}
.container {
Šířka: 90VW;
}
}

Nikdy nevíme, jestli je to příliš velké nebo příliš malé.

Jak můžeme vytvořit správný adaptivní rozložení systému? Jak navrhujeme citlivou webovou stránku, která funguje nativně od 320px do 2560px?

V ideálním případě by vaše maketa měla vysvětlit logiku za rozvržením a jak se přizpůsobí z menšího rozlišení k většímu:

Řešení

Adaptive layouts: solution — Zde je návod, jak vytvořit skutečně adaptivní rozložení

Chceme neustále upravovat vlastnosti z malé obrazovky na velký. Žádné zarážky a žádné mediální dotazy. To, co chceme, je jedna hodnota, která funguje pro každý displej.

Klíčem je matematická funkce se dvěma proměnnými. Pokud například chceme upravit velikost písma titulů, funkce by měla vypadat takto:

1920x + y = 80
375x + y = 48

1920 - Výchozí šířka desktopu v designu maketa (rovná se 100vw)
375 - Výchozí mobilní šířka v designu maketa (rovná se 100vw)
80 - Požadovaný název písma H1 na ploše
48 - Požadovaný velikost písma H1 název na mobilu

Jedná se o hodnoty X a Y:

X = (80 - 48) / (1920 - 375)
X = 0.0207.

Y = 80 - 1920 * 0.0207
Y = 40,256.

Chcete-li použít tyto hodnoty, budete potřebovat funkci CACK CSS pro provádění výpočtů na webové stránce (široce podporované prohlížeči z IE9 +). Měli bychom počítat x * 100 krát (protože 1vw jednotka = 1 / 100. šířka výřezu).

Vezmeme naši původní funkci:
1920x + y = 80
375x + y = 48

Nahradit 1920 se 100VW:
100VW * x + y = požadovaná hodnota

Vyměňte x a y s hodnotami:
100VW * 0.0207 + 40.256 = požadovaná hodnota

Dostáváme finální styl CSS:

 H1 {Velikost písma: Calc (2.07VW + 40,25px)}

Překvapivě dost, který konečně funguje, jak jsme chtěli!

Jen jeden majetek pro všechny displeje. Není třeba přepsat hodnoty znovu a znovu. Můžete nastavit a vypočítat všechny druhy vlastností: šířka, velikost písma, polstrování, okraj atd.

Pokusme se vytvořit skutečný rozvržení pomocí této techniky:

Ale tento přístup má jednu nevýhodu: Je těžké pochopit, jakou hodnotu stojí za tímto funkcí Calc. Jak to můžeme zjednodušit?

Pokud kódujete HTML denně, jste pravděpodobně obeznámeni s pre-procesory SASS / SCSS. Tady je malá pomoc pro vás: Udělejme "mixin" a učinit všechny tyto výpočty automaticky, a stále udržovat naše původní hodnoty.

Je to stejná funkce, jak je popsáno výše, ale vyráběná jako Sass Mixin:

 $ Zobrazit-široký: 1920
$ Display-úzký: 375

@Mixin tekutina ($ nemovitost, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ displej-široký - $ displej-úzký)
  $ y: $ maxvalue - $ displej-široký * $ x
  # {$ nemovitost}: Calc (# {100 * $ x} VW + # # {$ y} px)

H1.
  @include tekutina ("velikost písma", 48,80)

.kontejner
  @include tekutinu ("šířka", 315.1580)
@include tekutinu ("polstrování", 30,60)

Adaptive layouts: mixin — Sass Mixin může usnadnit celý proces

Tato technika Poskytuje velmi sofistikované řešení konečně budovat skutečně citlivé webové rozložení. Podporuje většinu prohlížečů, zajišťuje váš projekt, který má být správně zobrazen návštěvníka, zjednodušuje strukturu stylů a nejdůležitější je vaše webové rozložení konzistentní a logické. Doufám, že vám to může pomoci spustit některé úžasné webové projekty.

Související články:

17 Opravdu užitečné reagující web design tutoriály
Pravidla citlivé webové typografie
Vytvořte citlivý rozložení s mřížkou CSS

Sestavte adaptivní rozvržení bez médií

Tradiční způsob

Jednotky výřezu

Řešení

jak - Nejoblíbenější články

Animovat SVG s JavaScriptem

Použijte nástroj pero a textury pro přidání hloubky v aplikaci Photoshop

Jak vytvořit text glitch a obrazové efekty v CSS

Speed Sculpt stvoření v Zbrushu

Jak přidat drama do pastelových uměleckých děl

Jak vytvořit vlastní plátno desky

Jak navrhnout promo pro imaginární značku

Kombinujte tradiční a digitální dovednosti k vytvoření komiksu

Kategorie