Esempio di Font Size in VW by @andrewto - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

placeholderDefinisce un testo segnaposto per un elemento input o textarea
<ol>Crea liste ordinate o numerate.
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
typeSpecifica la tipologia/funzione di un elemento.
requiredRende obbligatorio un campo di input
downloadConsente di scaricare file al click di collegamento ipertestuale.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Navbar Example 1

Array of Colors

Download vlc for PC Windows

"esercitazione5.html”

vendita ebay(2)

Heads Or Tails Tally

Resiliant Material

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Esempio di Font Size in VW</title>
  <style>
    /* Reset dei margini e dei padding */
    body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif; /* Utilizziamo un font di base */
    }

    /* Stile per il titolo */
    .title {
      font-size: 6vw; /* La dimensione del carattere occupa il 6% della larghezza del viewport */
      color: #333;
      text-align: center;
      margin-bottom: 20px;
    }

    /* Stile per il sottotitolo */
    .subtitle {
      font-size: 4vw; /* La dimensione del carattere occupa il 4% della larghezza del viewport */
      color: #666;
      text-align: center;
      margin-bottom: 10px;
    }

    /* Stile per il testo principale */
    .main-text {
      font-size: 3vw; /* La dimensione del carattere occupa il 3% della larghezza del viewport */
      color: #999;
      text-align: justify;
      margin: 0 auto;
      max-width: 800px; /* Limitiamo la larghezza del testo per una migliore leggibilità */
      padding: 0 20px; /* Aggiungiamo un po' di spazio ai lati per una migliore leggibilità */
    }
  </style>
</head>
<body>
  <!-- Titolo -->
  <h1 class="title">Benvenuto nel nostro Sito Web</h1>

  <!-- Sottotitolo -->
  <h2 class="subtitle">Esplora le nostre offerte speciali</h2>

  <!-- Testo principale -->
  <div class="main-text">
    <p>Questo è un esempio di testo principale che utilizza le unità VW per definire la dimensione del carattere. Il testo si adatterà dinamicamente alla larghezza del viewport del browser, garantendo una migliore leggibilità su dispositivi di diverse dimensioni.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet turpis purus. Duis posuere ex quis enim volutpat, ut cursus massa aliquet. Nam rutrum nibh sed dui malesuada, eu molestie est tempor. Aenean accumsan lorem a consectetur commodo.</p>
    <p>Fusce ullamcorper justo id quam dictum, et fringilla purus convallis. Vivamus vestibulum ligula vel odio tincidunt, et vehicula sem efficitur. Sed porta, risus id dictum mollis, nulla velit tincidunt mi, nec cursus ipsum purus vel nisi.</p>
  </div>
</body>
</html>