미디어 쿼리에서 변수를 사용하는 CSS
미디어 쿼리에서 변수 사용
이제 미디어 쿼리 내에서 변수 값을 변경하려고 합니다.
팁: 미디어 쿼리는 다양한 장치(화면, 태블릿, 휴대폰 등)에 대해 서로 다른 스타일 규칙을 정의하는 것입니다. 미디어 쿼리 장 에서 미디어 쿼리에 대해 자세히 알아볼 수 있습니다 .
여기에서 먼저 클래스에 대해 --fontsize라는 새 로컬 변수를 선언합니다
.container. 값을 25픽셀로 설정했습니다. 그런 다음 우리는
.container더 아래의 클래스에서 그것을 사용합니다. 그런 다음
@media"브라우저의 너비가 450px 이상일 때
.container클래스의 --fontsize 변수 값을 50px로 변경합니다." 라는 규칙을 만듭니다.
다음은 완전한 예입니다.
예시
/* 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;
}
}
다음은 @media규칙에서 --blue 변수의 값도 변경하는 또 다른 예입니다.
예시
/* 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;
}
}
브라우저 지원
표의 숫자는
var()기능을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 함수
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |