Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Sauvegarder le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> :root { --primary-bg-color: #1e90ff; --primary-color: #ffffff; } body { couleur-de-fond: var(--primary-bg-color); } .container { --fontsize: 20px; couleur: var(--primary-bg-color); couleur-de-fond: var(--primary-color); padding: 15px; taille-de-police: var(--fontsize); } .container h2 { border-bottom: 2px solide var(--primary-bg-color); } @media screen and (min-width: 450px) { .container { --fontsize: 40px; } :root { --primary-bg-color: lightblue; } } </style> </head> <body> <h1>Utiliser des variables dans les requêtes médias</h1> <div class="container"> <h2>Lorem Ipsum</h2> <p>Lorsque la largeur du navigateur est de 450px ou plus, définissez la valeur de la variable --fontsize à 40px et la valeur de la variable --primary-bg-color à lightblue. Redimensionnez la fenêtre du navigateur pour voir l'effet.</p> </div> </body> </html>