Che cos'è il design responsivo?

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 61 di 76.

Nel web design, il design responsivo è un approccio che mira a creare pagine web che si adattano e offrono un'esperienza di visualizzazione ottimale su un'ampia gamma di dispositivi, dai monitor dei computer desktop ai telefoni cellulari. Un sito web responsivo adatta automaticamente il layout, i contenuti e le funzionalità in base alle dimensioni, alla risoluzione e all'orientamento dello schermo del dispositivo su cui viene visualizzato. L'obiettivo del design responsivo è assicurarsi che gli utenti possano accedere facilmente al sito web e interagire con esso, indipendentemente dal dispositivo che stanno usando.

Il design responsive si ottiene attraverso una combinazione di tecniche, tra cui:

Griglie e layout flessibili: usare CSS Grid o Flexbox per creare layout in grado di adattarsi a schermi di dimensioni diverse.

Immagini e contenuti multimediali flessibili: assicurarsi che le immagini e gli altri contenuti multimediali si ridimensionino proporzionalmente al layout.

Media query: applicazione di stili CSS diversi in base alle caratteristiche del dispositivo, come la larghezza, l’altezza e l’orientamento dello schermo.

Con sempre più persone che usano dispositivi mobili per navigare sul web, il design responsivo è essenziale per rendere i siti web facili da usare. Garantisce che il tuo sito abbia un bell’aspetto e funzioni bene su qualsiasi dispositivo, offrendo agli utenti un’esperienza fluida e coerente.

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<h1>), un paragrafo (<p>) e due immagini (<img>). Il tuo compito è aggiungere alcune regole CSS di base per rendere gli elementi responsive e mostrare chiaramente la differenza tra altezza fissa e altezza automatica. Segui i passaggi indicati di seguito:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta la dimensione del carattere su 5vw. In questo modo, la dimensione del carattere dell'intestazione sarà responsive rispetto alla larghezza del viewport.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta la dimensione del carattere su 3vw. In questo modo, la dimensione del carattere del paragrafo sarà responsive rispetto alla larghezza del viewport.
Scrivi una regola CSS che selezioni la classe .fixed-height. Imposta la larghezza su 100% e l'altezza su 150px. In questo modo, l'immagine risulterà distorta perché le viene imposta un'altezza fissa.
Scrivi una regola CSS che selezioni la classe .auto-height. Imposta la larghezza su 100% e l'altezza su auto. In questo modo, l'immagine verrà ridimensionata proporzionalmente mantenendo le proprie proporzioni.
Scrivi regole CSS per i contenitori (.container) per assegnare loro una larghezza di 300px, un bordo di 2px solid #ccc, un margine di 20px e una spaziatura interna di 10px.

Provalo tu

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>