Adaptív elrendezések építése média lekérdezések nélkül

Sep 15, 2025

kézikönyv

Hosszú ideig próbáltam tökéletes vizuális kompozíciót elérni a weboldalakon. Sok fájdalmat kaptam a CSS töréspontokkal a mindennapi munkámban, és soha nem volt elégedett a megfelelő módon a reagáló elrendezés kezelésének közös módjaival. Nemrégiben felfedeztem egy nagyon hűvös Érzékeny webdesign Trükk, ami mindent egyszerű, következetes és logikus, és szívesen megosztom veled.

Ez a cikk elsősorban a kreatív fejlesztés, így ez mind: kezelőfelületen a fejlesztők, akik lehet találni ezt a technikát hasznos, és webes tervezők, akik kell egy általános megértését web termelési és hogyan lehetne javítani a végső kimenet. Feltételezem, hogy már tudja a CSS, a töréspontok és a média lekérdezésekről.

Építsen egy blogot a rács és a flexbox segítségével

A hagyományos módon

Adaptive layouts: breakpoints — A töréspontok a nem szabványos nézetablakok számára nem kielégítő eredményeket eredményezhetnek

Hordozható eszközök vesznek részt a világon. Számos mindenféle eszköz változtatja meg a weboldalak létrehozását. A "Responsive Website" segítségével a legtöbb ember csak asztali és mobil verziókat vesz fel (néha asztali, tabletta, mobil). Így működik hagyományosan:

 H1 {
Betűméret: 80px;
}
.container {
Szélesség: 980px;
Margó: 0 Auto;
}

@media (max-szélesség: 1023px) {
H1 {
Betűméret: 48px;
}
.container {
Szélesség: Auto;
Padding: 0 30px;
}
}

Valójában általában a honlap elrendezés Látjuk, hogy nem készülünk a készülékünkre. Lássuk, nézzük meg, hogyan állítjuk be a & lt; h1 & gt betűméretét; cím:

Adaptive layouts — Csak egy törésponttal, amit furcsa megjelenésű pontmérettel végezhetsz

Látod, a mi & lt; h1 & gt; A cím "betűméret: 48px" 320px és 800px szélességű eszközön, és "betűméret: 80px" 1024px és 2560px.

Természetesen több töréspontot is hozzáadhatunk, de a különböző eszközök száma számtalan! Ez nagyon bonyolult és zavaros formákat fog készíteni, mert nehéz tudni, hogy melyik értéket alkalmazzák melyik képernyőre.

Adaptive layouts: font size — Soha nem hozhat létre elegendő töréspontot, hogy a betűméretet tökéletes minden képernyőn

Amire szükségünk van, ez:

Viewport egységek

Adaptive layouts: viewpoint units — A nézetablakok javítják a kérdéseket, de még mindig szükségük van munkára

A probléma megoldása a VW és VH nézetablakok. Ezek a nézetablak szélességének 1/100-at ábrázoló hosszúságú egységek (széles körben támogatott böngészők az IE9 + -tól).

Ezeket használhatjuk, hogy a weboldal tulajdonságait méret szerint állítsa be. A helyzet egy kicsit jobb lesz, de a fájdalom még mindig ugyanaz:

 H1 {
Betűméret: Calc ((80/1920) * 100VW;
}
.container {
Szélesség: 80vw;
Margó: 0 Auto;
}

@media (max-szélesség: 1023px) {
H1 {
Betűméret: Calc ((48/375) * 100VW;
}
.container {
Szélesség: 90VW;
}
}

Soha nem tudjuk, hogy túl nagy vagy túl kicsi.

Hogyan építhetünk valódi adaptív elrendezési rendszert? Hogyan tervezzünk olyan érzékeny weboldalt, amely Nately 320px-től 2560px-ig dolgozik?

Ideális esetben a mockupnak meg kell magyaráznia az elrendezés mögötti logikát, és hogyan illeszkedik egy kisebb felbontásból, hogy nagyobb legyen:

A megoldás

Adaptive layouts: solution — Itt van, hogyan készítsünk egy igazán adaptív elrendezési rendszert

Szeretnénk folyamatosan beállítani a tulajdonságokat egy kis képernyőn egy nagyra. Nincs töréspont és nincs média lekérdezés. Amit akarunk, egyetlen érték, amely minden kijelzőn működik.

A kulcs két változóval rendelkező matematikai funkció a kulcs. Például, ha be szeretnénk állítani a cím betűméretét, akkor a funkciónak így kell kinéznie:

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

1920 - Alapértelmezett asztali szélesség egy design mockupban (100VW)
375 - Alapértelmezett mobilszélesség egy design mockupban (100VW)
80 - Kívánt H1 cím betűmérete az asztalon
48 - Kívánt H1 cím betűméret a mobilon

Ezek az X és Y értékek:

x = (80 - 48) / (1920-375)
x = 0,0207

y = 80 - 1920 * 0.0207
y = 40,256

Az értékek használatához szükségünk lesz a Calc CSS funkcióra a weboldalon történő számítások elvégzéséhez (széles körben támogatva az IE9 + böngészők). Meg kell számolnunk x * 100-szor (mert 1VW egység = 1/100-as nézetablak szélessége).

Elfogadjuk az eredeti funkciót:
1920x + y = 80
375x + y = 48

Cserélje ki az 1920-at 100VW-vel:
100VW * x + y = kívánt érték

Az X és Y cseréje az értékekkel:
100VW * 0,0207 + 40.256 = kívánt érték

A végső CSS-stílust kapjuk:

 H1 {FONT-MÉRET: CALC (2.07VW + 40.25PX)}

Meglepő módon elég, ez végül működik, hogyan akartunk!

Csak egy tulajdonság az összes kijelző számára. Nem kell újra felülírnia az értékeket újra és újra. Beállíthatja és kiszámítható mindenféle tulajdonság: szélesség, betűméret, párnázás, margó stb.

Próbáljuk meg létrehozni egy tényleges elrendezést ezzel a technikával:

De ez a megközelítésnek van egy hátránya: Nehéz megérteni, hogy milyen értéket áll a számított funkció mögött. Hogyan egyszerűsíthetjük azt?

Ha naponta kódolod a HTML-t, akkor valószínűleg ismeri a Sass / SCSS pre-processzorokat. Itt egy kis segítség az Ön számára: kössünk „mixin”, és hogy ezeket a számításokat automatikusan történik, és még mindig tartja az eredeti értékeket.

Ugyanaz a függvény, amint azt fentebb leírtuk, de Sass mixinként készül:

 $ kijelző széles: 1920
$ Display-keskeny: 375

@mixin folyadék ($ tulajdonság, $ minvahalue, $ maxérték)
  $ x: ($ MAXVALUE - $ MINVALUE) / ($ Display-Wide - $ Display-keskeny)
  $ Y: $ MAXVALUE - $ kijelző-széles * $ x
  # {$ tulajdonság}: Calc (# {100 * $ x} vw + # {$ y} px)

h1
  @Hlude fluid ("betűméret", 48,80)

.tartály
  @Include folyadék ("szélesség", 315,1580)
@nclude folyadék ("padding", 30,60)

Adaptive layouts: mixin — A Sass Mixin könnyebbé teheti az egész folyamatot

Ez a technika Nagyon kifinomult megoldást kínál, hogy végül igazán érzékeny web-elrendezéseket építsen. Ez a legtöbb böngésző, biztosítja a projekt, hogy helyesen kimutatták, hogy a látogató, leegyszerűsíti a stílusok szerkezet, és ami a legfontosabb teszi a webes elrendezés konzisztens és logikus. Remélem, segíthet néhány meglepő webes projekt elindításában.

Kapcsolódó cikkek:

17 Igazán hasznos érzékeny webdesign oktatóanyagok
Az érzékeny web tipográfia szabályai
Hozzon létre egy érzékeny elrendezést a CSS-rácskal

Adaptív elrendezések építése média lekérdezések nélkül

A hagyományos módon

Viewport egységek

A megoldás

kézikönyv - Most Popular Articles

Kezelés React Form állapot formájával

Jamstack: Gyorsabb, hatékonyabb weboldalak építése

Hogyan készítsünk folyékony hatásokat WebGL-vel

Festeni egy huncut nyúl az akvarellben

Power A blog a WordPress API használatával

A VR-ben lévő karaktert

Hogyan kell kifejleszteni a mitikus teremtményeket

Kreatív kreatív portrékkal és arc-tudatos folyékonysággal

Kategóriák