Per le informazioni che ho ricavato online, ho visto che un sito responsive si crea utilizzando le media queries CSS3. Le media queries sono delle dichiarazioni di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media. Ad esempio, in un foglio di stile, possiamo trovare una media query di questo tipo:
@media screen and (min-width: 768px) {
....istruzioni css....
}
Con questa media query verifichiamo che il media utilizzato sia lo schermo di un computer e che la sua larghezza minima sia di 768px; se le condizioni sono soddisfatte vengono eseguite le istruzioni css nelle parentesi graffe.
In questo modo è possibile definire vari "breakpoint", ovvero diverse soglie dimensionali al di sopra delle quali o al di sotto delle quali sono eseguite diverse istruzioni CSS, che conferiscono, dunque, al sito un diverso design a seconda delle dimensioni dello schermo del dispositivo utilizzato. In questo modo il sito diventa "adattivo" e si visualizza in maniera ottimale su tutti i dispositivi.
Inoltre per impedire che i dispositivi ridimensionino automaticamente il sito si scrive il seguente codice HTML nella sezione <head></head>:
<meta name="viewport" content="width=device-width"/>
Infine esistono delle librerie Javascript che rendono compatibili le media queries CSS3 con i browser più vecchi.
Spero di averti chiarito un po' le idee