Bygg adaptiva layouter utan mediafrågor

Sep 11, 2025

Hur

Under lång tid försökte jag nå en perfekt visuell komposition på webbsidor. Jag har haft massor av smärta med CSS-brytpunkter i mitt dagliga arbete och var aldrig helt nöjd med vanliga sätt att hantera den lyhörda layouten. Nyligen upptäckte jag en mycket cool Responsiv webbdesign Trick som gör allt enkelt, konsekvent och logiskt, och jag är ivriga att dela den med dig.

Den här artikeln handlar huvudsakligen om kreativ utveckling, så det är för både: Front End-utvecklare som kan hitta den här tekniken användbara, och webbdesigners som borde ha en allmän förståelse för webbproduktion och hur man förbättrar den slutliga produktionen. Jag antar att du redan vet om CSS, Breakpoints och Media Queries.

Bygg en blogg med rutnät och flexlåda

Det traditionella sättet

Adaptive layouts: breakpoints — Brytpunkter kan leda till otillfredsställande resultat för icke-standardiserade visningsportar

Bärbara enheter tar över världen. En mängd olika typer av enheter ändrar hur vi skapar webbplatser. Med "en responsiv webbplats" de flesta antar bara skrivbords- och mobilversioner (ibland skrivbord, tablett, mobil). Så här fungerar det traditionellt:

 H1 {
FONT-STORLEK: 80px;
}
.behållare {
Bredd: 980px;
Marginal: 0 Auto;
}

@Media (MAX-Bredd: 1023PX) {
h1 {
FONT-STORLEK: 48px;
}
.behållare {
Bredd: Auto;
Padding: 0 30px;
}
}

I själva verket, vanligtvis Webbplatslayout Vi ser är inte gjorda för vår enhet. Till exempel, låt oss se hur vi justerar teckensnittet av & lt; h1 & gt; titel:

Adaptive layouts — Med bara en brytpunkt kan du hamna med konstiga poängstorlekar

Du ser, vår & lt; h1 & gt; Titeln har "Font-size: 48px" på 320px och 800px Bredd enhet, och "Font-size: 80px" på 1024px och 2560px.

Naturligtvis kan vi lägga till fler brytpunkter, men antalet olika enheter är otaliga! Detta kommer att göra designspecifikationer mycket komplicerade och förvirrande, eftersom det är svårt att veta vilket värde som tillämpas på vilken skärm.

Adaptive layouts: font size — Du kan aldrig skapa tillräckligt med brytpunkter för att få teckensnittstorlek perfekt på varje skärm

Vad vi verkligen behöver är detta:

Visningsenheter

Adaptive layouts: viewpoint units — Viewport-enheter förbättrar frågor, men de behöver fortfarande arbete

Lösningen på detta problem involverar visningsenheter VW och VH. Dessa är längdenheter som representerar 1 / 100th av Bredden / höjden på visningsporten (i stor utsträckning av webbläsare från IE9 +).

Vi kan använda dessa för att justera egenskaperna hos en webbsida enligt dess storlek. Situationen blir lite bättre, men smärtan är fortfarande densamma:

 H1 {
FONT-STORLEK: Calc ((80/1920) * 100VW;
}
.behållare {
Bredd: 80vw;
Marginal: 0 Auto;
}

@Media (MAX-Bredd: 1023PX) {
h1 {
FONT-STORLEK: CALK ((48/375) * 100VW;
}
.behållare {
Bredd: 90vw;
}
}

Vi vet aldrig om det är för stort eller för litet.

Hur kan vi bygga ett riktigt adaptivt layoutsystem? Hur utformar vi en lyhörd webbplats som fungerar med 320px till 2560px?

Helst bör din mockup förklara logiken bakom layouten och hur det anpassar sig från en mindre upplösning till större:

Lösningen

Adaptive layouts: solution — Så här gör du ett verkligt adaptivt layoutsystem

Vi vill kontinuerligt anpassa egenskaper från en liten skärm till en stor. Inga brytpunkter och inga medifrågor. Det vi vill ha är ett enda värde som fungerar för varje bildskärm.

En matematikfunktion med två variabler är nyckeln. Om vi till exempel vill justera en titelnypstorlek, ska funktionen se ut så här:

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

1920 - Standard Desktop Bredd i en design Mockup (motsvarar 100VW)
375 - Standard mobilbredd i en designmockup (är lika med 100VW)
80 - Önskad H1 titel typsnitt storlek på skrivbordet
48 - Önskad H1 titel typsnittstorlek på mobilen

Dessa är X- och Y-värdena:

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

Y = 80 - 1920 * 0,0207
y = 40.256

För att använda dessa värden behöver vi CSSS-funktionen för att utföra beräkningar på webbsidan (i stor utsträckning av webbläsare från IE9 +). Vi bör räkna x * 100 gånger (eftersom 1vw enhet = 1 / 100th av visningsbredd).

Vi tar vår ursprungliga funktion:
1920X + Y = 80
375x + y = 48

Byt ut 1920 med 100VW:
100vw * x + y = önskat värde

Byt ut x och y med värdena:
100VW * 0,0207 + 40,256 = önskat värde

Vi får den slutliga CSS-stilen:

 H1 {FONT-STORLEK: CALK (2.07VW + 40.25PX)}

Överraskande nog, som äntligen fungerar hur vi ville ha!

Bara en egendom för alla skärmar. Inget behov av att skriva över värdena igen och igen. Du kan justera och beräkna alla typer av egenskaper: Bredd, typsnitt, Padding, Marginal, etc.

Låt oss försöka bygga en verklig layout med hjälp av den här tekniken:

Men det här tillvägagångssättet har en nackdel: Det är svårt att förstå vilket värde som står bakom den här beräkningsfunktionen. Hur kan vi förenkla det?

Om du kodar HTML dagligen är du förmodligen bekant med SASS / SCSS pre-processor. Här är lite hjälp för dig: Låt oss göra en "mixin" och göra alla dessa beräkningar hända automatiskt och håller fortfarande våra ursprungliga värden.

Det är samma funktion som beskrivits ovan, men gjord som en Sass Mixin:

 $ Display-Wide: 1920
$ Display-smal: 375

@mixin vätska ($ egendom, $ minvalue, $ maxvalue)
  $ X: ($ MaxValue - $ minvalue) / ($ Display-wide - $ Display-smal)
  $ y: $ MaxValue - $ Display-Wide * $ X
  # {$ property}: calc (# {100 * $ x} vw + # {$ y} px)

h1
  @include vätska ('Font-size', 48,80)

.behållare
  @include vätska ('Bredd', 315,1580)
@include vätska ('Padding', 30,60)

Adaptive layouts: mixin — En sassblandning kan göra hela processen enklare

Denna teknik Ger en mycket sofistikerad lösning för att äntligen bygga verkligt responsiva webbayouter. Den stöder de flesta webbläsarna, säkrar ditt projekt för att visas korrekt till en besökare, förenklar din stilsstruktur, och viktigast gör din webb layout konsekvent och logisk. Jag hoppas det kan hjälpa dig att starta några förvånande webbprojekt.

Relaterade artiklar:

17 Riktigt användbart Responsive Web Design Tutorials
Reglerna för mottaglig webbtypografi
Skapa en responsiv layout med CSS-rutnät

Bygg adaptiva layouter utan mediafrågor

Det traditionella sättet

Visningsenheter

Lösningen

Hur - Mest populära artiklar

Hur man undviker en Amazon Prime Day 2020 misslyckas

Hur man gör en logotyp i Photoshop

Hur man skapar en digital oljemålning med hjälp av ArtRage

Bygg en materialdesignapp med vinkel 2

Hur man målar en drömlik fantasifästsplats

Växa växter i Houdini

Hur man utformar användarvänliga mobila gränssnitt

Gör en hi-fidelity prototyp i Atomic

Kategorier