Come fare un sito web responsive in CSS

Per creare sito web responsive con il linguaggio CSS basta fissare delle regole di formattazione che considerino la larghezza dello schermo dell'utente.

Ecco un esempio pratico

Creo un semplice documento HTML con due tag div.

<html>
<body>
</body>
<div class=corpo></div>
<div class=menu></div>
</body>
</html>

Associo al documento HTML un foglio di stile in CSS.

.corpo {
position:relative;
width:74%;
float:right;
}
.menu {
position:relative;
float:left;
width:25%;
}
@media only screen and (max-width: 600px) {
.corpo { width:100%; }
.menu { width:100%; }
}

Le classi corpo e menu fissano la larghezza di default di due elementi del sito rispettivamente a 74% e 25% tramite le proprietà width.

Il menu occupa dinamicamente il 25% dello schermo dell'utente mentre il corpo il 74%, indipendentemente dalla grandezza dello schermo.

il layout css

Le due classi si affiancano l'una all'altra tramite la proprietà float.

Con l'attributo @media fisso un'eccezione per gli schermi al di sotto dei 600px di larghezza.

In questo caso la proprietà delle classi viene imposta al 100% di larghezza.

In questo modo il corpo e il menu appaiono uno sopra l'altro.

il layout responsive

E' solo un semplice esempio per rendere l'idea. E' un punto di partenza.

Seguendo questa strada si può creare un layout responsive con il foglio di stile CSS.

Come richiamare due fogli di stile a seconda delle schermo

Se le differenze di stile sono molte è preferibile creare due fogli di stili separati e richiamarli dal documento HTML a seconda delle dimensioni dello schermo.

<html>
<head>
<link rel="stylesheet" media="screen and (min-width: 900px)" href="stilesitoweb.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="stilesitomobile.css">
</head>
...
</html>

In questo modo si raddoppia il codice css da sviluppare e manutere, ma è più semplice intervenire e capire la causa di eventuali problemi di formattazione.

E così via.