CSS 미디어 쿼리에서 변수 사용

미디어 쿼리에서 변수 사용

지금, 우리는 미디어 쿼리에서 변수 값을 변경하고자 합니다.

팁:미디어 쿼리는 다른 장치(모니터, 태블릿, 휴대폰 등)에 대해 다른 스타일 규칙을 정의하기 위해 사용됩니다. 미디어 쿼리에 대해 더 많은 내용을 '미디어 쿼리' 장에서 배울 수 있습니다.

여기서 우리는 먼저 .container 클래스에 이름이 --fontsize인 새로운 로컬 변수를 선언합니다. 그 값을 25픽셀로 설정한 후 .container 클래스에서 그것을 추가로 사용합니다. 그런 다음, 내용이 '브라우저의 너비가 450px 또는 더 넓을 때 .container 클래스의 --fontsize 변수 값을 50px로 변경합니다'인 @media 규칙을 만듭니다.

이것은 전체 예제입니다:

예제

/* 변수 선언 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 스타일 */
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 변수의 값을 변경했습니다:

예제

/* 변수 선언 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 스타일 */
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() 49.0 15.0 31.0 9.1 36.0

CSS var() 함수

함수 설명
var() CSS 변수 값을 삽입하세요。