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;
}
}
توضیحات:
-
تعریف متغیرها: در اینجا متغیرهای
--blue
و--white
را به صورت سراسری و متغیر--fontsize
را به صورت محلی برای کلاس.container
تعریف میکنیم. -
مدیا کوئری: وقتی عرض صفحه به 450 پیکسل یا بیشتر میرسد:
- مقدار
--fontsize
به 50 پیکسل تغییر میکند. - مقدار
--blue
بهlightblue
تغییر مییابد.
- مقدار
این تکنیک به شما امکان میدهد استایلها و مقادیر متغیرها را بر اساس اندازه صفحه یا دستگاه تغییر دهید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام