استفاده از متغیرهای CSS در مدیا کوئری ها

از مدیا کوئری ها، برای تنظیم استایل های مختلف برای دستگاه های مختلف(دسکتاپ، تبلت، موبایل و غیره) استفاده می شود. اکنون، ما می خواهیم یک مقدار متغیر برای صفحاتی که عرض آنها زیر 450px است تنظیم کنیم و یک مقدار متغیر دیگر نیز برای صفحاتی که عرض آنها بیش از 450px است تنظیم کنیم. در اینجا، ابتدا یک متغیر محلی جدید به نام --fontsize برای کلاس .container تعریف می کنیم. و مقدار آن را برابر با 20 پیکسل قرار می دهیم. سپس، یک دستور @media ایجاد می کنیم که می گوید: وقتی که عرض مرورگر 450px یا بیشتر است، مقدار متغیر --fontsize را برای کلاس .container برابر با 40px قرار بده. 

: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;
  }
}

در زیر نیز یک مثال دیگر وجود دارد که در آن، مقدار متغیر --primary-bg-color را در دستور @media تغییر می دهیم:

: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;
  }
}