Questo articolo illustra i passaggi per creare un design di sito Web reattivo in HTML e CSS utilizzando:
- Meta tag della finestra
- Immagini reattive
- Layout della scatola flessibile
- Layout della griglia
- Richieste multimediali
Come creare un design di sito Web reattivo con HTML e CSS?
La creazione di un design di sito Web reattivo con HTML e CSS implica la creazione di un layout che si adatti a diverse dimensioni e risoluzioni dello schermo. Ecco i passaggi che puoi seguire per creare un design del sito Web reattivo:
Passaggio 1: meta tag della finestra
IL ' finestra Il meta tag gioca un ruolo fondamentale nella creazione di un responsive web design. È inserito all'interno del “
< meta nome = 'finestra' contenuto = 'larghezza=larghezza-dispositivo,scala-iniziale=1' / >
Il meta tag sopra ha due attributi:
- IL ' nome L'attributo ” indica il nome della funzionalità per cui viene creato/utilizzato questo tag. Ad esempio, impostando ' finestra ' al ' nome ” per gestire il viewport di diversi dispositivi.
- IL ' contenuto L'attributo ” definisce il valore dell'attributo precedente. Imposta la larghezza di ogni dispositivo e ridimensiona il documento/pagina web al 100%.
Passaggio 2: immagini reattive
Poiché la dimensione dell'immagine varia l'una dall'altra, quindi, è difficile impostare la stessa ' altezza ' O ' larghezza ” per ogni immagine. Quando la dimensione dell'immagine è fissa, gli utenti non ridimensionano l'immagine della pagina Web con lo schermo. Tuttavia, gli utenti possono impostare l'immagine reattiva tramite il seguente codice:
imm {
max- larghezza : 100 %;
}
IL ' larghezza massima La proprietà CSS limita la visualizzazione dell'immagine all'interno dello spazio allocato. Impostando il valore in '%', l'immagine si ridimensiona insieme al ridimensionamento del suo elemento genitore. Questo crea un effetto reattivo per l'immagine.
Passaggio 3: layout della scatola flessibile
Il layout Flexbox è altamente raccomandato per creare un design del sito Web reattivo. Consente agli elementi HTML di essere visualizzati in una determinata posizione e di ridimensionare lo spazio disponibile per ciascun figlio in base alla dimensione disponibile dal div genitore. Il layout Flexbox contiene diverse proprietà che offrono molta libertà allo sviluppatore, come nel codice seguente:
< stile >
.genitore {
display: flessibile;
}
.bambino {
flettere: 1 ;
testo- allineare : centro;
}
< / stile >
< corpo >
< div classe = 'genitore' >
< div classe = 'bambino' stile = 'bordo: 3px solido bluvioletto;' >Benvenuti< / div >
< div classe = 'bambino' stile = 'bordo: verde scuro solido 3px;' >a< / div >
< div classe = 'bambino' stile = 'bordo: 3px rosso fisso;' >Linuxint< / div >
< / div >
< / corpo >
Nello snippet di codice sopra:
- Innanzitutto, crea un elemento div genitore con un id di ' genitore ' dentro il '
etichetta '. - Quindi, crea più elementi div figlio e assegna loro una classe di ' bambino ”.
- Quindi, seleziona ' genitore ” class e fornire il valore di “ flettere ” per il CSS “ Schermo ' proprietà.
- Successivamente, fornire un valore di ' 1 ' al ' flettere ” proprietà a ciascuno “ bambino ” che visualizza l'elemento figlio come un flex.
Dopo aver eseguito il codice sopra, la pagina web si presenta così:
L'output sopra mostra che l'elemento figlio sta ottenendo la stessa larghezza quando il browser viene ridimensionato.
Passaggio 4: layout della griglia
Il layout della griglia crea una griglia e assegna gli elementi HTML all'interno della porzione di griglia. Gli elementi della griglia cambiano rispetto alle dimensioni dello schermo della pagina web. Crea un design reattivo poiché la dimensione dell'elemento HTML cambia in base allo schermo del dispositivo:
< stile >.contenitore {
visualizzazione: griglia;
griglia-template-colonne: 1fr 1fr 1fr;
}
< / stile >
< corpo >
< div classe = 'componente' >
< div stile = 'bordo: verde foresta solido 3px;' >Linuxint< / div >
< div stile = 'bordo: verde scuro solido 3px;' >Linuxint< / div >
< div stile = 'bordo: 3px rosso fisso;' >Linuxint< / div >
< / div >
< / corpo >
Nel codice sopra:
- Innanzitutto, crea un div genitore e assegnagli una classe di ' componente ' dentro il '
etichetta '. Successivamente, crea tre elementi div figlio al suo interno. - Quindi, nel file CSS assegna un ' griglia ” valore al “ Schermo ” proprietà per il “ contenitore ” div.
- Dopodiché, crea tre porzioni di uguali dimensioni sulla pagina web utilizzando il ' griglia-template-colonna ” e impostala uguale a “ 1fr 1fr 1fr ” dove fr significa “ frazione ”.
Dopo aver compilato il codice precedente, l'output è simile al seguente:
L'output mostra che i div si stanno ridimensionando in base alle dimensioni dello schermo con proporzioni uguali.
Passaggio 5: query multimediali
L'utilizzo delle query multimediali per creare un design reattivo è una specie di vecchia scuola, ma la maggior parte dei siti Web utilizza le query multimediali. Le media query possono essere aggiunte direttamente nel file CSS dopo aver aggiunto lo stile predefinito per l'elemento HTML selezionato. La media query rende il codice un po' più lungo e disordinato. Perché lo sviluppatore deve inserire separatamente il codice per ogni dimensione dello schermo.
Ad esempio, vedere il seguente frammento di codice:
@ media schermo e ( min- larghezza : 640 pixel ) {.componente {
sfondo- colore : verde foresta;
}
}
Nello snippet di codice sopra:
- Innanzitutto, imposta la media query che applica le proprietà CSS alla classe di elementi selezionata ' componente ” quando la larghezza della dimensione dello schermo diventa maggiore di “ 640 pixel ”.
- Successivamente, seleziona la 'classe del componente e imposta il valore di' verde foresta ' per il ' colore di sfondo ' proprietà.
.componente {
sfondo- colore : dodgerblue;
}
}
Quindi per il frammento di codice sopra:
- Imposta la media query per applicare gli stili quando la dimensione della larghezza è inferiore a ' 1000 pixel ”.
- Ora, seleziona il ' componente ” class e fornire un valore di “ dodgerblue ' per il ' colore di sfondo ' proprietà:
Dopo aver eseguito i frammenti di codice di cui sopra, l'output è simile al seguente:
L'output mostra che la media query sta cambiando lo sfondo in base alle dimensioni dello schermo. Anche la dimensione del carattere, la larghezza, l'altezza e altre proprietà CSS possono essere applicate seguendo lo stesso schema.
Le possibili dimensioni dello schermo dei punti di interruzione da considerare durante l'utilizzo delle media query sono:
- Per ' piccolo 'dimensioni dello schermo, impostare la larghezza inferiore a' 640 pixel ”.
- Per ' medio 'dimensioni dello schermo del viewport, la larghezza varia tra' 641 pixel ' E ' 1007 pixel ”.
- Per ' grande 'dimensioni dello schermo, impostare la larghezza su' 1008 pixel ” o maggiore.
Conclusione
Per creare un design del sito Web reattivo, gli sviluppatori devono aggiungere il ' finestra ” tag nel “