Variabile CSS în media queries
Media queries vă permit să setați reguli de stil diferite pentru dispozitive diferite, precum ecrane, tablete și telefoane. Puteți afla mai multe despre acestea în Capitolul despre Media Queries.
Un truc util este să schimbați valorile variabilelor CSS în interiorul unei media query. În acest fel, stilurile care folosesc acele variabile se vor actualiza automat atunci când dimensiunea ecranului se schimbă.
Exemplu
Acest exemplu setează o variabilă locală --fontsize la 20px pentru clasa .container. Apoi, o regulă @media schimbă --fontsize la 40px atunci când fereastra browserului are o lățime de 450px sau mai mult.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables in Media Queries</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
font-size: var(--fontsize);
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 40px;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
</div>
</body>
</html>
Schimbarea mai multor variabile
Puteți schimba, de asemenea, mai mult de o variabilă în interiorul unei media query. Acest exemplu schimbă atât variabila --fontsize, cât și variabila --primary-bg-color atunci când ecranul are 450px sau mai mult.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables in Media Queries</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
font-size: var(--fontsize);
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 40px;
}
:root {
--primary-bg-color: lightblue;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
</div>
</body>
</html>
Funcția CSS var()
Funcția var() inserează valoarea unei variabile CSS. Puteți citi mai multe despre aceasta în referința CSS var().