CSS używający zmiennych w zapytaniach o media
Używanie zmiennych w zapytaniach o media
Teraz chcemy zmienić wartość zmiennej w zapytaniu o media.
Wskazówka: Zapytania o multimedia dotyczą definiowania różnych reguł stylu dla różnych urządzeń (ekrany, tablety, telefony komórkowe itp.). Więcej informacji na temat Zapytań o media można znaleźć w naszym rozdziale Zapytania o media .
Tutaj najpierw deklarujemy nową zmienną lokalną o nazwie --fontsize dla
.container
klasy. Ustawiamy jego wartość na 25 pikseli. Następnie używamy go w
.container
klasie niżej. Następnie tworzymy
@media
regułę, która mówi „Gdy szerokość przeglądarki wynosi 450 pikseli lub więcej, zmień wartość zmiennej --fontsize
.container
klasy na 50 pikseli”.
Oto pełny przykład:
Przykład
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
}
Oto kolejny przykład, w którym zmieniamy również wartość zmiennej --blue w @media
regule:
Przykład
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę
var()
funkcję.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funkcja
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |