Quando si progetta un sito web moderno, uno degli aspetti più importanti da considerare è la responsività. Si tratta della capacità delle pagine di adattarsi in modo fluido a diversi dispositivi, come computer desktop, tablet e smartphone. Gli utenti navigano sempre di più da mobile e spesso è necessario mostrare o nascondere determinati elementi a seconda della dimensione dello schermo. Un menù troppo complesso, un'immagine ingombrante o una sezione di testo poco utile su schermi piccoli, ad esempio, potrebbero compromettere l'esperienza utente.
Per fortuna, le CSS media query ci offrono un modo semplice e potente per gestire queste situazioni, consentendoci di applicare stili differenti in base alla risoluzione o alle caratteristiche del dispositivo. In questo tutorial vedremo passo dopo passo come nascondere o mostrare elementi su mobile usando HTML, CSS ottenendo così un risultato professionale e ottimizzato per ogni tipologia di utente.
Le media query in HTML e CSS
Per affrontare questo tutorial useremo soltanto gli strumenti essenziali che ogni sviluppatore web ha a disposizione. Da un lato troviamo l'HTML, che ci consente di definire la struttura logica della pagina e inserire gli elementi che vogliamo gestire. Dall'altro il CSS, che oltre a occuparsi dello stile visivo, ci permette di introdurre regole condizionali tramite le media query.
Queste ultime non sono altro che istruzioni che dicono al browser: "Se lo schermo ha una certa larghezza, applica queste regole di stile". In questo modo possiamo decidere, ad esempio, che un'immagine venga nascosta quando l'utente naviga da smartphone, oppure che un pulsante appaia soltanto nella versione desktop. Grazie a questa tecnica avremo quindi un controllo preciso sulla visibilità dei contenuti, senza dover creare versioni separate della stessa pagina. L'obiettivo del tutorial sarà proprio quello di costruire un piccolo esempio pratico con HTML, CSS: una pagina con testo e immagine che si adatteranno automaticamente in base al dispositivo utilizzato.
Introduzione e struttura delle media query
Le media query sono una funzionalità avanzata di CSS che permette di applicare stili diversi in base alle caratteristiche del dispositivo che visualizza la pagina, come la larghezza dello schermo, l'altezza, l'orientamento o la risoluzione. In pratica, ci consentono di costruire siti responsive, adattabili a desktop, tablet e smartphone, senza dover duplicare contenuti. La loro struttura di base è semplice:
@media (condizione) {
/* Regole CSS da applicare solo quando la condizione è vera */
}Cosa significa questo estratto di codice?
@media- La condizione può riguardare larghezza (
min-widthmax-widthportraitlandscape - All'interno delle parentesi graffe
{}
Con le media query possiamo quindi personalizzare l'esperienza utente su ogni dispositivo, decidendo cosa mostrare o nascondere e come organizzare i contenuti in modo più leggibile e funzionale. Di seguito vediamo un esempio pratico applicato in una pagina HTML reale. Ecco il codice HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio con viewport</title>
</head>
<body>
<h1>Benvenuto nel nostro esempio</h1>
<!-- Paragrafo di testo che vogliamo mostrare solo su desktop -->
<p class="desktop-only">
Questo testo è visibile solo nella versione desktop.
</p>
<!-- Paragrafo di testo che vogliamo mostrare solo su mobile -->
<p class="mobile-only">
Questo testo appare soltanto su dispositivi mobili.
</p>
<!-- Immagine che useremo come elemento di esempio -->
<img src="immagine.jpg" alt="Esempio immagine" class="desktop-only">
<!-- Pulsante che sarà sempre visibile, indipendentemente dal dispositivo -->
<button>Scopri di più</button>
</body>
</html>Nella sezione abbiamo inserito il meta viewport, fondamentale per far sì che il sito si adatti correttamente agli schermi mobili. Successivamente abbiamo definito due classi speciali: .desktop-only e .mobile-only. Saranno loro ad essere gestite tramite CSS per decidere cosa mostrare e cosa nascondere. Infine, il bottone è un elemento neutro, che rimarrà sempre visibile.
Ecco invece il codice CSS:
/* Stili di base validi per tutti i dispositivi */
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
p {
font-size: 18px;
margin: 10px 0;
}
/* Nascondiamo di default gli elementi che hanno classi desktop-only, mobile-only */
.desktop-only,
.mobile-only {
display: none;
}
/* Media query per dispositivi con schermi più larghi di 768px (desktop/tablet) */
@media (min-width: 768px) {
.desktop-only {
display: block; /* Gli elementi desktop-only diventano visibili */
}
}
/* Media query per dispositivi con schermi più piccoli di 768px (mobile) */
@media (max-width: 767px) {
.mobile-only {
display: block; /* Gli elementi mobile-only diventano visibili */
}
}La prima parte di questo codice CSS definisce lo stile generale della pagina (font, allineamento, colori e spaziature). Proseguendo, con la regola .desktop-only, .mobile-only { display: none; } nascondiamo inizialmente tutti gli elementi con queste due classi, così da avere un punto di partenza neutro. La prima media query (@media (min-width: 768px)) si applica quando lo schermo è maggiore o uguale a 768px, qui facciamo comparire gli elementi dedicati al desktop. La seconda media query (@media (max-width: 767px)) si applica invece quando lo schermo è più piccolo di 768px: in questo caso rendiamo visibili solo gli elementi dedicati al mobile.
Risultato finale e commento
Grazie alle media query e al codice implementato, la pagina ora si adatta automaticamente al dispositivo dell'utente: i contenuti destinati al desktop vengono nascosti su mobile e viceversa, mentre il pulsante interattivo consente di mostrare o nascondere elementi dinamicamente. Il risultato è una pagina pulita, leggibile e responsive, ottimizzata per ogni tipo di schermo.
Di seguito viene mostrato il risultato ottenuto dall'unione dei codici sopra mostrati.
Versione desktop:
Versione mobile:
Conclusioni
In questo tutorial abbiamo visto come sia possibile nascondere o mostrare elementi su mobile e desktop utilizzando le media query in CSS, integrando HTML per la struttura della pagina e, se necessario, un po' di JavaScript per rendere il contenuto dinamico. Abbiamo imparato a definire regole condizionali che si attivano in base alla larghezza dello schermo, permettendo così di offrire un'esperienza utente ottimale su qualsiasi dispositivo.
Questa tecnica è estremamente versatile: possiamo applicarla non solo a testi e immagini, ma anche a menu di navigazione, pulsanti, banner o intere sezioni della pagina. La combinazione di media query e JavaScript offre un controllo completo sulla visibilità e l'interattività degli elementi, senza complicare il codice o creare duplicazioni.
Applicando questi principi, i tuoi siti diventeranno più accessibili, leggibili e professionali, adattandosi automaticamente a ogni schermo e migliorando l'esperienza di navigazione dei tuoi utenti, sia su desktop che su mobile.
