Costruisci layout adattativi senza query multimediali

Sep 14, 2025

Come si fa

Per molto tempo stavo cercando di raggiungere una perfetta composizione visiva sulle pagine web. Ho avuto un sacco di dolore con i punti di rottura del CSS nel mio lavoro quotidiano e non sono mai stato abbastanza soddisfatto dei modi comuni di gestire il layout reattivo. Recentemente, ho scoperto un molto fresco web design reattivo Trucco che rende tutto semplice, coerente e logico, e sono desideroso di condividerlo con te.

Questo articolo riguarda principalmente lo sviluppo creativo, quindi è sia per entrambi: gli sviluppatori front-end che potrebbero trovare questa tecnica utile e i web designer che dovrebbero avere una comprensione generale della produzione web e come migliorare l'uscita finale. Suppongo che tu sappia già di CSS, Breakpoint e Media Query.

Costruisci un blog con griglia e flexbox

Il modo tradizionale

Adaptive layouts: breakpoints — I breakpoint possono portare a risultati insoddisfacenti per le visite non standard

I dispositivi portatili stanno prendendo in consegna il mondo. Una varietà di tutti i tipi di dispositivi sta cambiando il modo in cui creiamo siti Web. Con 'un sito web reattivo' la maggior parte delle persone assumono solo versioni desktop e mobili (a volte desktop, tablet, mobile). Ecco come funziona tradizionalmente:

 H1 {
Dimensioni del carattere: 80px;
}
.container {
Larghezza: 980px;
Margine: 0 Auto;
}

@media (larghezza massima: 1023px) {
H1 {
Dimensioni del carattere: 48 px;
}
.container {
Larghezza: Auto;
Imbottitura: 0 30px;
}
}

In effetti, di solito il Layout del sito web Stiamo vedendo non è fatto per il nostro dispositivo. Ad esempio, vediamo come regolendo la dimensione del carattere di & lt; H1 & GT; titolo:

Adaptive layouts — Con un solo punto di rottura puoi finire con le dimensioni del punto dall'aspetto strano

Vedi, nostro & lt; H1 & GT; Il titolo ha "dimensione del carattere: 48px" sul dispositivo di larghezza 320px e 800px e "Font-Dimensione: 80px" su 1024 PX e 2560px.

Naturalmente, possiamo aggiungere altri punti di interruzione, ma il numero di dispositivi diversi non è innumerevole! Questa faranno specifiche di design molto complicate e confuse, perché è difficile sapere quale valore viene applicato a quale schermo.

Adaptive layouts: font size — Non puoi mai creare abbastanza punti di interruzione per ottenere la dimensione del carattere perfetta su ogni schermo

Ciò di cui abbiamo davvero bisogno è questo:

Unità di vista.

Adaptive layouts: viewpoint units — Le unità della vista migliorano le questioni, ma hanno ancora bisogno di lavoro

La soluzione a questo problema coinvolge le unità di vista VW e VH. Queste sono unità di lunghezza che rappresentano 1/100 della larghezza / altezza della vista (ampiamente supportata dai browser da IE9 +).

Possiamo usarli per regolare le proprietà di una pagina Web in base alle sue dimensioni. La situazione diventerà un po 'meglio, ma il dolore è sempre lo stesso:

 H1 {
Font-Dimensione: Calc ((80/1920) * 100VW;
}
.container {
Larghezza: 80VW;
Margine: 0 Auto;
}

@media (larghezza massima: 1023px) {
H1 {
Font-Dimensione: Calc ((48/375) * 100VW;
}
.container {
Larghezza: 90vw;
}
}

Non sappiamo mai se è troppo grande o troppo piccolo.

Come possiamo costruire un sistema di layout adattivo vero-adattativo? Come progettiamo un sito reattivo che funzioni nativamente da 320 px a 2560 px?

Idealmente, il tuo mockup dovrebbe spiegare la logica dietro il layout e come si adatta da una risoluzione più piccola a più grande:

La soluzione

Adaptive layouts: solution — Ecco come creare un sistema di layout veramente adattivo

Vogliamo regolare continuamente le proprietà da un piccolo schermo a uno grande. Nessun breakpoint e nessuna query dei supporti. Quello che desideriamo è un singolo valore che funziona per ogni display.

Una funzione di matematica con due variabili è la chiave. Ad esempio, se vogliamo regolare una dimensione del carattere title, la funzione dovrebbe assomigliare a questo:

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

1920 - Larghezza desktop predefinita in un mockup di progettazione (uguale a 100vw)
375 - Larghezza mobile predefinita in un mockup di progettazione (uguale a 100vw)
80 - Dimensione del carattere del titolo H1 desiderato sul desktop
48 - Dimensione del carattere del titolo H1 desiderato sul cellulare

Questi sono i valori X e Y:

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

y = 80 - 1920 * 0.0207
y = 40.256.

Per utilizzare questi valori avremo bisogno della funzione CALC CSS per eseguire calcoli sulla pagina Web (ampiamente supportata dai browser da IE9 +). Dovremmo contare X * 100 volte (perché unità 1vw = 1/100 ° della larghezza della vista).

Prendiamo la nostra funzione originale:
1920x + y = 80
375x + y = 48

Sostituisci il 1920 con 100VW:
100vw * x + y = valore desiderato

Sostituisci x e y con i valori:
100vw * 0.0207 + 40.256 = valore desiderato

Otteniamo lo stile CSS finale:

 H1 {Font-Dimensione: calc (2.07vw + 40.25px)}

Sorprendentemente abbastanza, che finalmente funziona come volevamo!

Solo una proprietà per tutti i display. Non c'è bisogno di sovrascrivere i valori ancora e ancora. È possibile regolare e calcolare qualsiasi tipo di proprietà: larghezza, dimensione del carattere, imbottitura, margine, ecc.

Proviamo a costruire un layout effettivo usando questa tecnica:

Ma questo approccio ha uno svantaggio: è difficile capire che valore si trova dietro questa funzione calc. Come possiamo semplificarlo?

Se stai programmando quotidianamente HTML, probabilmente hai familiarità con i pre-processori SASS / SCSS. Ecco un piccolo aiuto per te: facciamo un "mixin" e fai accendere tutti questi calcoli automaticamente e continuano a mantenere i nostri valori originali.

È la stessa funzione descritta sopra, ma creata come miscela sass:

 $ display-wide: 1920
$ display-stretto: 375

@mixin fluid ($ proprietà, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ display-wide - $ display-stretto)
  $ Y: $ MaxValue - $ display-wide * $ x
  # {$ proprietà}: calc (# {100 * $ x} vw + # {$ y} px)

H1.
  @include fluido ('font-size', 48,80)

.contenitore
  @include fluido ('larghezza', 315,1580)
@include fluido ('imbottitura', 30,60)

Adaptive layouts: mixin — Un mixina sass può rendere l'intero processo più facile

Questa tecnica Fornisce una soluzione molto sofisticata per costruire finalmente layout web veramente reattivi. Supporta la maggior parte dei browser, assicura il tuo progetto per essere visualizzato correttamente a un visitatore, semplifica la struttura degli stili e, soprattutto, rende il tuo layout web coerente e logico. Spero che possa aiutarti a lanciare alcuni stupefacenti progetti web.

Articoli Correlati:

17 tutorial di design reattivo reattivo davvero utile
Le regole della tipografia web reattiva
Crea un layout rispondente con la griglia CSS

Costruisci layout adattativi senza query multimediali

Il modo tradizionale

Unità di vista.

La soluzione

Come si fa - Articoli più popolari

Come creare moduli Web accessibili

Vernice Acqua increspata in oli

Concept Design Suggerimenti per artisti

Costruisci app che funzionano offline

Caratteri di gioco di livello con Assembly creative

5 consigli per migliorare le tue creazioni VR

Come catturare la luce con gli oli

Crea un'atmosfera pittorica nella tua arte digitale

Categorie