In questa lezione affronteremo i seguenti argomenti:
• Comprendere il concetto di media queries in CSS3.
• Imparare a utilizzare media queries per creare layout responsive.
• Conoscere le best practices per il design responsive.
Introduzione alle Media Queries
Le media queries consentono di applicare stili CSS in base alle caratteristiche del dispositivo, come larghezza dello schermo, orientamento, risoluzione e altro.
/* Esempio di media query per schermi di larghezza inferiore a 600px */
@media screen and (max-width: 600px) {
/* Stili specifici per schermi stretti */
body {
font-size: 14px;
}
.container {
width: 100%;
}
}
Layout Responsive
- utilizzare unità di misura flessibili come percentuali e em al posto di pixel per adattarsi dinamicamente alle dimensioni dello schermo.
- implementare layout flessibili con Flexbox o Grid Layout.
/* Esempio di utilizzo di unità flessibili */
.container {
width: 80%; /* Adatta la larghezza al 80% del contenitore genitore */
}
/* Esempio di layout flessibile con Flexbox */
@media screen and (max-width: 600px) {
.flex-container {
display: flex;
flex-direction: column;
}
}
Immagini e Media Responsive
- utilizzare l'attributo max-width: 100%; per le immagini per garantire che non superino la larghezza del loro contenitore.
- incorporare video e altri media in modo responsive.
/* Immagini responsive */
img {
max-width: 100%;
height: auto;
}
/* Video responsive */
.video-container {
position: relative;
padding-bottom: 56.25%; /* Rapporto di aspetto 16:9 */
overflow: hidden;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Attività Pratica
- Rendere responsive una pagina web esistente utilizzando media queries.
- Sperimentare con diverse dimensioni di schermo per garantire un layout fluido.
- Incorporare immagini e media in modo responsive.