Home esercizi css media query

Esercizi Media Query CSS

Scopri come rendere il tuo sito web responsive e adattabile a diverse dimensioni di schermo con le media query in CSS. Pratica l’uso delle media query per applicare stili specifici in base alle caratteristiche del dispositivo dell’utente.

Esercizio 1

Crea una pagina HTML con un paragrafo. Applica un'istanza di media query CSS per cambiare il colore del testo del paragrafo in rosso quando la larghezza della finestra del browser è inferiore a 600 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        color: black;
      }

      @media (max-width: 600px) {
        p {
          color: red;
        }
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un'immagine. Applica un'istanza di media query CSS per ridurre le dimensioni dell'immagine a 50% della larghezza originale quando la larghezza della finestra del browser è inferiore a 800 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      img {
        width: 100%;
      }

      @media (max-width: 800px) {
        img {
          width: 50%;
        }
      }
    </style>
  </head>
  <body>
    <img src="image.jpg" alt="Immagine di esempio" />
  </body>
</html>

Esercizio 3

Crea una pagina HTML con una lista non ordinata contenente tre elementi di lista. Applica un'istanza di media query CSS per rendere gli elementi della lista in verticale quando la larghezza della finestra del browser è inferiore a 500 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      li {
        display: inline-block;
      }

      @media (max-width: 500px) {
        li {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un titolo. Applica un'istanza di media query CSS per cambiare la dimensione del testo del titolo a 24 pixel quando la larghezza della finestra del browser è inferiore a 700 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      h1 {
        font-size: 36px;
      }

      @media (max-width: 700px) {
        h1 {
          font-size: 24px;
        }
      }
    </style>
  </head>
  <body>
    <h1>Titolo dell'intestazione</h1>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un campo di input di tipo testo. Applica un'istanza di media query CSS per cambiare la dimensione del testo del campo di input a 16 pixel quando la larghezza della finestra del browser è inferiore a 600 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      input[type="text"] {
        font-size: 20px;
      }

      @media (max-width: 600px) {
        input[type="text"] {
          font-size: 16px;
        }
      }
    </style>
  </head>
  <body>
    <input type="text" placeholder="Inserisci un testo" />
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un paragrafo. Applica un'istanza di media query CSS per centrare il testo orizzontalmente nel paragrafo quando la larghezza della finestra del browser è inferiore a 400 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      p {
        text-align: left;
      }

      @media (max-width: 400px) {
        p {
          text-align: center;
        }
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo.</p>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un'immagine. Applica un'istanza di media query CSS per nascondere l'immagine quando la larghezza della finestra del browser è inferiore a 768 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      img {
        display: block;
      }

      @media (max-width: 768px) {
        img {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <img src="image.jpg" alt="Immagine di esempio" />
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un paragrafo. Applica un'istanza di media query CSS per cambiare il colore di sfondo del paragrafo in giallo quando la larghezza della finestra del browser è inferiore a 900 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      p {
        background-color: white;
      }

      @media (max-width: 900px) {
        p {
          background-color: yellow;
        }
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo.</p>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con una tabella contenente alcune righe e colonne. Applica un'istanza di media query CSS per cambiare il colore di sfondo delle celle `td` in verde quando la larghezza della finestra del browser è inferiore a 600 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      td {
        background-color: white;
      }

      @media (max-width: 600px) {
        td {
          background-color: green;
        }
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1, Colonna 1</td>
        <td>Riga 1, Colonna 2</td>
      </tr>
      <tr>
        <td>Riga 2, Colonna 1</td>
        <td>Riga 2, Colonna 2</td>
      </tr>
    </table>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un campo di input di tipo testo. Applica un'istanza di media query CSS per cambiare il colore del bordo del campo di input in rosso quando la larghezza della finestra del browser è inferiore a 400 pixel.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      input[type="text"] {
        border: 1px solid black;
      }

      @media (max-width: 400px) {
        input[type="text"] {
          border: 1px solid red;
        }
      }
    </style>
  </head>
  <body>
    <input type="text" placeholder="Inserisci un testo" />
  </body>
</html>