Introduzione al design responsivo - Aiuto Webflow

Last updated on 10/22/2025@mrbirddev

Scopri come il reflow dei contenuti, le dimensioni fisse, le dimensioni relative e i breakpoint (media queries) aiutano a creare design responsivi.

Quando visiti un sito sul tuo dispositivo mobile, potresti vedere una versione desktop del sito compressa in uno schermo più piccolo, costringendoti a zoomare e scorrere per vedere qualsiasi contenuto. Potresti anche atterrare su una versione mobile semplificata che manca del contenuto e dell'esperienza che rendono la versione desktop superiore. Si spera, però, che tu veda un sito web responsivo, un design che riorganizza e riposiziona i contenuti in base alla larghezza del browser.

Ci sono tre diversi aspetti del design responsivo che tratteremo qui:

Reflow dei contenuti
Dimensioni fisse
Dimensioni relative
Breakpoint (media queries)

Reflow dei Contenuti

Il reflow dei contenuti si riferisce ai contenuti che si adattano alla larghezza del viewport del browser. Ad esempio, un paragrafo con impostazioni predefinite avvolgerà automaticamente il suo contenuto man mano che la larghezza del browser si riduce. Questo comportamento può essere emulato trascinando il bordo della tela del Designer.

Dimensioni Fisse

È importante essere attenti quando si utilizzano larghezze fisse in pixel. Ad esempio, se si assegna a un'immagine una larghezza di 500px, potrebbe apparire ottima su un desktop o un tablet. Tuttavia, visualizzando l'immagine su un dispositivo mobile più piccolo, la larghezza dell'immagine rimarrà bloccata a 500px e non si adatterà al viewport più piccolo (di solito meno di 500px).

Dimensioni Relative

Questo si riferisce all'impostazione della dimensione di un elemento in relazione ad altre cose come la larghezza del browser o un elemento genitore. Ad esempio, invece di utilizzare una dimensione basata su pixel per un'immagine, considera l'uso di unità diverse come %, VW (larghezza del viewport) o VH (altezza del viewport). Se usi % su un'immagine e regoli la larghezza del browser, vedrai che si adatterà di conseguenza mentre un'immagine basata su px non lo farà.

Scopri di più sull'applicazione di diverse unità per controllare la larghezza e l'altezza degli elementi.

Punti di interruzione

I layout sono solitamente molto più complessi della gestione della larghezza di un'immagine. Utilizzare i punti di interruzione (noti anche come media query) ti consente non solo di testare il riflusso dei contenuti, ma anche di modificare il design e il layout in base a diverse gamme di larghezza del dispositivo.

Scopri di più:

Torna all'aiuto di webflow

Last updated on 10/22/2025@mrbirddev