Come posso rendere un sito web reattivo?

Voglio sapere come creare un sito Web e tutti i suoi elementi rispondono per adattarsi a diverse dimensioni dello schermo: caratteri, immagini ecc …

Devo fare qualcosa come questo:

@media only screen and (max-width : 320px) { //here put the width and height of all the elements in the site } 

e renderlo per ogni dimensione dello schermo? C’è un modo più semplice?

I layout adattivi (layout reattivi) comprendono i seguenti tre fattori:

1. Layout flessibili:

Le immersioni che usi per creare i tuoi layout di pagina web devono consistere in unità di lunghezza relativa. Questo significa che non devi usare larghezze fisse nel tuo CSS, piuttosto usare percentuali.

La formula per convertire le dimensioni da un disegno in percentuali è (target / contesto) x100 = risultato

inserisci la descrizione dell'immagine qui

Consente di riprendere l’immagine sopra come esempio di un disegno. Per calcolare quale sarà la dimensione della div a sinistra in questo modo: (300px / 960px) x100 = 30.25%

Il CSS dovrebbe assomigliare a questo:

 .leftDiv { width: 30.25%; float: left; } .rightDiv { width: 65%; float: left; } 

Per ridimensionare automaticamente il testo puoi utilizzare un’unità chiamata VW (ViewWidth)

 .myText { font-size: 1vw; } 

Ciò garantisce che il testo venga automaticamente ridimensionato rispetto alla larghezza della vista.

2. Media flessibile:

Supporti flessibili si applicano a immagini, video e sondaggi che si ridimensionano automaticamente rispetto al genitore.

Esempio:

 img, video, canvass { max-width: 100%; } 

Questo assicura che questi elementi si ridimensionino automaticamente all’interno del suo genitore.

3. Media query:

Il passo successivo è utilizzare le query multimediali come hai fatto nella tua domanda, queste query multimediali definiscono alcune istruzioni CSS per alcune dimensioni dello schermo. Normalmente utilizzo solo tre media query per schermi di computer, tablet e schermi telefonici. Non è necessario avere più di questo perché i layout flessibili e il supporto flessibile assicurano un ridimensionamento relativo se eseguito correttamente.

È ansible trovare questo utile: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Ci sono due opzioni di cui sono a conoscenza.

  1. Usa Adobe Reflow , esattamente ciò che hai ma il software lo scrive per te e fai semplicemente clic e trascina i tuoi elementi, così otterrai lo stesso risultato molto più velocemente.
  2. Hanno assolutamente tutto una percentuale, dimensioni, margini, bordi, tutto. In questo modo non dovrai riscrivere più volte il codice, un’opzione “taglia unica”.

Dai un’occhiata a Bootstrap e più specificamente al Grid System . Dovrebbe aiutarti con CSS per diverse dimensioni dello schermo.

In caso di novità nel layout adattivo CSS, consultare i seguenti siti Web:

a) Bootstrap
b) Fondazione

Secondo me Foundation è un ottimo punto di partenza. Ha una documentazione molto bella sulle griglie. Per favore controlla