CSS Variables - Variables in Media Queries

이제 미디어 쿼리 내에서 변수값을 변경하려고 합니다.

Tip: 미디어 쿼리는 다양한 장치 (스크린, 태블릿, 휴대폰 등)에 대해 다양한 스타일 규칙을 정의하는 것입니다.
Media Queries Chapter에서 더 많은 미디어 쿼리를 배울 수 있습니다.

여기에서 먼저 .container 클래스에 대해 --fontsize라는 새 지역 변수를 선언합니다.
값을 25 픽셀로 설정합니다. 그런 다음 더 아래에 있는.container 클래스에서 사용합니다.
그런 다음 “브라우저 너비가 450px 이상이면 .container 클래스의 --fontsize 변수 값을 50px로 변경합니다.”라는 @media 규칙을 만듭니다.

    /* 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;
      }
      /* 브라우저 화면 너비가 450px 이상일 때 적용됨 */
      :root {
        --blue: lightblue;
      }
    }