Il termine web design reattivo corrisponde alla strategia di far comportarsi un sito Web a seconda del dispositivo su cui viene visualizzato. Ad esempio, è possibile far alterare un sito Web in base alla larghezza dello schermo, alla risoluzione, all'orientamento, ecc. Un web design reattivo rende un sito Web dinamico di natura.

Se rendi reattivo il tuo sito Web, non è necessario sviluppare più e più volte lo stesso sito Web per ogni nuovo dispositivo che emerge sul mercato. Il sito Web cambierebbe automaticamente il suo comportamento in base al desiderio dell'utente. Questa reattività farà cambiare il sito Web quando l'utente passa dall'utilizzo del sito Web su un desktop a un telefono cellulare.

Ora sappiamo cos'è un sito web reattivo, la prossima grande domanda è come generarne uno. Considera la sezione successiva per esplorare la risposta a questa domanda.

Come rendere il tuo web design reattivo

Rendere reattivo un sito Web implica la realizzazione di elementi come testo, immagini, ecc. Utilizzando determinati layout. Di seguito ti abbiamo mostrato varie entità che rendono reattiva la tua pagina web.

1. Viewport

La prima e la cosa principale che dovresti includere nel tuo file di codice sorgente per rendere reattiva la tua pagina web è aggiungere un meta tag reattivo.

In questo tag, la larghezza è impostata sulla larghezza del dispositivo, il che significa che la larghezza della pagina Web cambierà in corrispondenza alla larghezza del dispositivo, mentre la scala iniziale è impostata su 1, il che significa che quando la pagina Web viene caricata dal browser Per la prima volta il livello di zoom sarà 1. Questo tag comanda sostanzialmente al browser di regolare le misurazioni di una pagina Web in base a varie situazioni.

2. Query dei media

Le query multimediali CSS consentono di modificare l'aspetto della struttura web a seconda del tipo di dispositivo che visualizza il sito Web come desktop, telefoni, laptop, ecc. Inoltre, questi possono essere utilizzati per valutare cose come l'altezza e la larghezza del dispositivo e la vista, l'orientamento del dispositivo o la risoluzione dello schermo.

Queste domande utilizzano alcuni punti di interruzione che vengono indicati come quei punti su cui il layout di un sito Web altera corrispondente alla dimensione dello schermo del tipo di dispositivo.

Sintassi

@media non | solo tipo multimediale e (funzionalità multimediale e | o non funzionalità media)

//Codice;

Parole chiave spiegate

• non: Inverte la semantica di una query multimediale.
• soltanto: Impedisce alle vecchie versioni di un browser di implementare la query multimediale.
• E: Combina un tipo di media con una certa funzionalità multimediale.

Ora esploriamo un esempio di come rendi reattiva la tua pagina web usando le query multimediali.

Esempio
Di seguito stiamo dimostrando una query multimediale.

Html

Ciao mondo!

Qui abbiamo definito un

elemento e posizionato un po 'di testo al suo interno.

CSS

H1
Font-Family: "Times New Roman", Times, Serif;

@media screen e (larghezza min: 720px)
H1
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

Nel codice sopra, la famiglia di carattere iniziale del paragrafo è impostata su Times New Roman, mentre, dopo aver applicato la query multimediale in cui abbiamo specificato che se la larghezza minima dello schermo è 720px o più larga, la famiglia del carattere del paragrafo sarà cambiare in Verdana. Ridimensiona la finestra del browser per vedere l'effetto della query multimediale.

Produzione
Quando la larghezza dello schermo minima è 720px o più ampia.

Quando la larghezza minima dello schermo è inferiore a 720px.

La query sui media funziona correttamente.

3. Flexbox

CSS Flexbox è un modello di layout che consente una disposizione efficiente e dinamica di elementi. Questo layout è monodimensionale che consente il posizionamento di elementi all'interno di un contenitore con spazio ugualmente distribuito. Questo layout rende gli elementi reattivi, il che significa che gli elementi cambiano il loro comportamento in base al tipo di dispositivo che li mostra. Rende gli elementi flessibili e fornisce loro una posizione adeguata e la simmetria.

Un Flexbox è costituito dai seguenti componenti che sono; UN Container Flex e a Articolo flessibile. Un contenitore Flex definisce le proprietà dell'elemento antenato impostando il display su Flex o inline-Flex. Nel frattempo, un elemento Flex descrive le proprietà degli elementi successivi e possono esserci numerosi elementi presenti all'interno di un contenitore Flex.

Inoltre, ci sono una serie di proprietà associate a un Flexbox che aiuta a rendere un web design reattivo. Qui ti mostreremo come puoi usare un Flexbox per rendere il tuo sito Web reattivo.

Esempio
Nell'esempio seguente abbiamo mostrato come generare una griglia di immagine reattiva usando Flexbox.

Html

Per creare una griglia di immagine stiamo realizzando un elemento div più grande e nidificando due elementi div all'interno di quel div più grande. Entrambi gli elementi Div nidificati nidificano ulteriormente tre immagini ciascuno.

CSS

.Container
display: flex;
Flex-wrap: avvolgimento;
imbottitura: 5px;

Il Div con la classe "Container" viene visualizzato come Flexbox ed è stato dato una certa imbottitura. Inoltre, alla proprietà Flex-Wrap viene assegnato un valore avvolgente, il che significa se necessario, le immagini verranno avvolte all'interno del contenitore.

CSS

.colonne img
larghezza: 100%;

.colonne
Flex: 50%;
Licromra massima: 50%;
imbottitura: 5px;

Le immagini sono state assegnate alla larghezza del 100% in modo da adattarsi in modo appropriato nel contenitore, inoltre usando la flessione e la larghezza massima, stiamo creando due colonne che verranno posizionate l'una accanto all'altra.

CSS

@media (max-width: 600px)
.colonne
Flex: 100%;
Licromra massima: 100%;

Insieme alla Flexbox stiamo anche usando una query multimediale. La query multimediale sopra specifica che se la larghezza è inferiore alla specifica, la due colonne verrà convertita in una.

Produzione
Ridimensionare la finestra del browser su e giù per vedere l'effetto.

È stata creata una griglia di immagine reattiva.

4. Bootstrap

È un framework CSS che consente ai suoi utenti di creare siti Web che sono reattivi in ​​natura e con un approccio mobile-first. Questo approccio specifica che il web design viene sviluppato per la prima volta per i telefoni cellulari e successivamente per altri dispositivi. Qui dimostreremo come realizzare una barra di navigazione che è reattiva in natura usando bootstrap.

Esempio
Stiamo utilizzando l'ultima versione di Bootstrap, che è Bootstrap 5 per creare una barra di navigazione.

Html

Prima di tutto per utilizzare Bootstrap 5 include CDN per CSS e JavaScript nel tuo file HTML come abbiamo mostrato sopra.

Html

Nel codice sopra, abbiamo fatto una barra di navigazione utilizzando varie classi Bootstrap 5. IL .Navbar La classe viene utilizzata per avvolgere una barra di navigazione insieme a .Navbar-Expand-Sm Classe per crollo reattivo. Nel frattempo il .BG-SUCCESS E .navbar-dark sono i diversi schemi di colore forniti alla barra di navigazione.

IL .contenitore La classe avvolge tutti gli elementi di una barra di navigazione con una larghezza fissa. Nel frattempo, il .navbar-nav La classe viene utilizzata crea una barra di navigazione che ha un'altezza massima ed è leggera e supporta anche i distorsioni.

IL .Nav-Item, E .Nav-link vengono utilizzati per creare vari elementi dell'elenco nella barra di navigazione e .attivo La classe rende attivo un link.

Produzione

Una barra di navigazione reattiva è stata generata con successo.

Conclusione

La progettazione del web reattiva corrisponde alla strategia di far alterare un sito Web a seconda del dispositivo su cui viene visualizzato. Se rendi reattivo il tuo sito Web, non è necessario sviluppare più e più volte lo stesso sito Web per ogni nuovo dispositivo che emerge sul mercato. Tale sito Web può essere sviluppato utilizzando varie entità come includere un meta tag reattivo nel tuo file, utilizzando query multimediali, Flexbox o Bootstrap. Qui in questo articolo, ti abbiamo mostrato varie tecniche con cui puoi rendere il tuo sito web reattivo.