Byg adaptive layouts uden medieforespørgsler

Sep 15, 2025

hvordan

I lang tid forsøgte jeg at nå en perfekt visuel sammensætning på websider. Jeg har haft masser af smerter med CSS-breakpoints i mit daglige arbejde og var aldrig helt tilfreds med fælles måder at håndtere det lydhørlige layout på. For nylig opdagede jeg en meget cool Responsive Web Design Trick, der gør alt enkelt, konsekvent og logisk, og jeg er ivrig efter at dele det med dig.

Denne artikel handler primært om kreativ udvikling, så det er både: Front End Developers, der måske finder denne teknik nyttige og webdesignere, der skal have en generel forståelse af webproduktionen og hvordan man forbedrer den endelige produktion. Jeg antager, at du allerede ved om CSS, Breakpoints og Media Queries.

Byg en blog med Gitter og Flexbox

Den traditionelle måde

Adaptive layouts: breakpoints — Breakpoints kan føre til utilfredsstillende resultater for ikke-standarditære visningstelefoner

Bærbare enheder overtager verden. En række forskellige typer enheder ændrer den måde, vi opretter websteder på. Med 'et lydhørt websted' antage de fleste, kun desktop- og mobilversioner (undertiden desktop, tablet, mobil). Sådan fungerer det traditionelt:

 H1 {
Font-størrelse: 80px;
}
.Container {
Bredde: 980px;
Margin: 0 Auto;
}

@media (max bredde: 1023px) {
H1 {
Font-størrelse: 48px;
}
.Container {
Bredde: Auto;
Padding: 0 30px;
}
}

Faktisk, normalt Website Layout. Vi ser ikke er lavet til vores enhed. Lad os f.eks. Se, hvordan vi justerer skriftstørrelsen af & lt; H1 & GT; titel:

Adaptive layouts — Med kun et breakpoint kan du ende med underlige pointstørrelser

Du ser, vores & lt; h1 & gt; Titel har "Font-Størrelse: 48px" på 320px og 800px bredde enhed, og "Font-Størrelse: 80px" på 1024px og 2560px.

Selvfølgelig kan vi tilføje flere breakpoints, men antallet af forskellige enheder er utallige! Dette vil gøre design specifikationer meget kompliceret og forvirrende, fordi det er svært at vide, hvilken værdi der anvendes på hvilken skærm.

Adaptive layouts: font size — Du kan aldrig oprette nok breakpoints for at få skrifttypestørrelsen perfekt på hver skærm

Det, vi virkelig har brug for, er dette:

Viewport-enheder

Adaptive layouts: viewpoint units — Viewport-enheder forbedrer forhold, men de har stadig brug for arbejde

Løsningen på dette problem involverer Viewport-enheder VW og VH. Disse er længdeenheder, der repræsenterer 1 / 100th af bredden / højden af visningsporten (bredt understøttet af browsere fra IE9 +).

Vi kan bruge disse til at justere egenskaberne på en webside i henhold til dens størrelse. Situationen vil blive lidt bedre, men smerten er stadig den samme:

 H1 {
Font-størrelse: Beregnet ((80/1920) * 100VW;
}
.Container {
Bredde: 80VW;
Margin: 0 Auto;
}

@media (max bredde: 1023px) {
H1 {
Font-størrelse: Calc ((48/375) * 100VW;
}
.Container {
Bredde: 90VW;
}
}

Vi ved aldrig, om det er for stort eller for lille.

Hvordan kan vi bygge et sandt adaptivt layout system? Hvordan designer vi et lydhørt websted, der arbejder indbygget fra 320px til 2560px?

Ideelt set bør din mockup forklare logikken bag layoutet, og hvordan det tilpasser sig en mindre opløsning til større:

Løsningen

Adaptive layouts: solution — Sådan laver du et virkelig adaptivt layout system

Vi ønsker løbende at justere egenskaber fra en lille skærm til en stor. Ingen breakpoints og ingen medie forespørgsler. Det, vi ønsker, er en enkelt værdi, der virker for hver skærm.

En matematikfunktion med to variabler er nøglen. For eksempel, hvis vi vil justere en titel skriftstørrelse, skal funktionen se sådan ud:

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

1920 - Standard Desktop Bredde i en Design Mockup (svarer til 100VW)
375 - Standard mobilbredde i en design mockup (svarer til 100VW)
80 - Ønsket H1 Titel Skriftstørrelse på skrivebordet
48 - Ønsket H1 Titel Skriftstørrelse på mobilen

Disse er X- og Y-værdierne:

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

Y = 80 - 1920 * 0.0207
Y = 40.256.

For at bruge disse værdier skal vi bruge CALC CSS-funktionen til at udføre beregninger på websiden (bredt understøttet af browsere fra IE9 +). Vi skal tælle X * 100 gange (fordi 1VW enhed = 1 / 100th of shootport bredde).

Vi tager vores oprindelige funktion:
1920x + y = 80
375x + y = 48

Udskift 1920 med 100VW:
100VW * x + y = ønsket værdi

Udskift x og y med værdierne:
100VW * 0,0207 + 40.256 = ønsket værdi

Vi får den endelige CSS-stil:

 H1 {FONT-STØRRELSE: CALC (2.07VW + 40.25PX)}

Overraskende nok virker det endelig, hvordan vi ønskede!

Bare en ejendom for alle skærme. Ingen grund til at overskrive værdierne igen og igen. Du kan justere og beregne nogen form for egenskaber: Bredde, skriftstørrelse, polstring, margin osv.

Lad os prøve at opbygge et faktisk layout ved hjælp af denne teknik:

Men denne tilgang har en ulempe: det er svært at forstå, hvilken værdi der står bag denne calc-funktion. Hvordan kan vi forenkle det?

Hvis du koder HTML Daily, er du sikkert bekendt med SASS / SCSS-forhåndsprocessorer. Her er en lille hjælp til dig: Lad os lave en "mixin" og gøre alle disse beregninger sker automatisk, og stadig holde vores oprindelige værdier.

Det er den samme funktion som beskrevet ovenfor, men lavet som en Sass Mixin:

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

@mixin væske ($ ejendom, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ display-wide - $ display-smal)
  $ y: $ maxvalue - $ display-wide * $ x
  # {$ Ejendom}: Beregnet (# {100 * $ x} VW + # {$ y} px)

H1.
  @include væske ('skriftstørrelse', 48,80)

.beholder
  @include væske ('bredde', 315,1580)
@include væske ('polstring', 30,60)

Adaptive layouts: mixin — En Sass Mixin kan gøre hele processen lettere

Denne teknik Giver en meget sofistikeret løsning til endelig at opbygge virkelig responsive weblayouts. Det understøtter de fleste af browserne, sikrer dit projekt til at blive korrekt vist til en besøgende, forenkler din stilarter struktur og vigtigst gør dit weblayout konsekvent og logisk. Jeg håber, at det kan hjælpe dig med at lancere nogle forbløffende webprojekter.

Relaterede artikler:

17 Virkelig nyttige Responsive Web Design Tutorials
Reglerne for lydhør web typografi
Skabe et lydhørt layout med CSS-grid

Byg adaptive layouts uden medieforespørgsler

Den traditionelle måde

Viewport-enheder

Løsningen

hvordan - Mest populære artikler

Byg terræn i Houdini 17

Sådan laver du din egen karakter Bibel

Forstå CSS Display Ejendom

Sådan digitalt sculpt i Zbrushcore

Sådan skaber du farverige verdener, der fortæller en historie

Opret organiske teksturer i blæk

Sådan opretter du realistisk CG klud

Sådan laver du dit WordPress Website flersproget

Kategorier