Ormai da tempo mi sono imbattutto nella progettazione di template responsive. Questo tipo di programmazione sfrutta il linguaggio CSS per far decidere di visualizzare gli elementi di una pagina in base alla tipologia di schermo su cui si richiama l’html.
Più in dettaglio si possono nascondere gli elementi di una pagina quando lo schermo diventa piccolo o visualizzarli quando lo schermo si ingrandisce.
La maniera più semplice per nascondere l’elemento è usare un display:none; .
Cominciamo dall’inizio.
Ho un codice del tipo:
[html]
<h1>Titolo<h1>
<h6>Sottotitolo</h6>
<div>corpo messaggio</div>
[/html]
Se volessimo nascondere il sottotitolo per tutti gli schermi che sono più piccoli di 500px, dovremmo aggiungere al codice la seguente dicitura:
[html]
<h1>Titolo<h1>
<h6 class=”sottotitolo”>Sottotitolo</h6>
<div>corpo messaggio</div>
[/html]
Poi scrivere il nostro codice CSS che indica di nascondere il
[css]
@media (min-width: 500px) { … }
@media (max-width: 500px) {
.sottotitolo {
display:none;
}
}
[/css]
Spero che questo piccolo consiglio sia utile anche se alcuni pensano che questa soluzione diminuisca l’accessibilità al sito.
Lascia un commento