CSS – متغیرها در مدیا کوئری‌ها (Variables in Media Queries)

اکنون می‌خواهیم مقدار یک متغیر را در داخل یک مدیا کوئری تغییر دهیم.

نکته: مدیا کوئری‌ها (Media Queries) برای تعریف قوانین استایل متفاوت برای دستگاه‌های مختلف (صفحه‌نمایش‌ها، تبلت‌ها، تلفن‌های همراه و غیره) استفاده می‌شوند. می‌توانید در فصل مربوط به مدیا کوئری‌ها بیشتر در این باره یاد بگیرید.

تغییر متغیر در مدیا کوئری‌ها

در اینجا، ابتدا یک متغیر محلی به نام --fontsize برای کلاس .container تعریف می‌کنیم و مقدار آن را به 25 پیکسل تنظیم می‌کنیم. سپس از این متغیر در داخل کلاس .container استفاده می‌کنیم. سپس، یک قانون @media ایجاد می‌کنیم که می‌گوید: “وقتی عرض مرورگر برابر با 450 پیکسل یا بیشتر باشد، مقدار متغیر --fontsize برای کلاس .container به 50 پیکسل تغییر کند.”

مثال کامل:

/* تعریف متغیرها */
: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;
  }
}

تغییر همزمان چند متغیر در مدیا کوئری

در این مثال، علاوه بر تغییر مقدار --fontsize، مقدار متغیر --blue را نیز در داخل قانون @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;
  }
  :root {
    --blue: lightblue;
  }
}

توضیحات:

  1. تعریف متغیرها: در اینجا متغیرهای --blue و --white را به صورت سراسری و متغیر --fontsize را به صورت محلی برای کلاس .container تعریف می‌کنیم.

  2. مدیا کوئری: وقتی عرض صفحه به 450 پیکسل یا بیشتر می‌رسد:

    • مقدار --fontsize به 50 پیکسل تغییر می‌کند.
    • مقدار --blue به lightblue تغییر می‌یابد.

این تکنیک به شما امکان می‌دهد استایل‌ها و مقادیر متغیرها را بر اساس اندازه صفحه یا دستگاه تغییر دهید.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.