استفاده از متغیرها در جستجوهای رسانه‌ای CSS
- صفحه قبل متغیرهای CSS - JavaScript
- صفحه بعدی CSS @property
استفاده از متغیرها در جستجوهای رسانه‌ای
حالا، ما می‌خواهیم مقدار متغیر را در جستجوهای رسانه‌ای تغییر دهیم.
توجه:جستجوهای رسانه‌ای به منظور تعریف قوانین استایل برای دستگاه‌های مختلف (صفحه‌نمایش، تبلت، موبایل و غیره) استفاده می‌شود. می‌توانید در فصل جستجوهای رسانه‌ای بیشتر درباره جستجوهای رسانه‌ای یاد بگیرید.
در اینجا، ابتدا یک متغیر محلی به نام --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;
}
}
این یک مثال دیگر است که در آن ما همچنین مقدار متغیر --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;
}
}
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی می‌کند.
| توابع | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
توابع var() CSS
| توابع | توضیح |
|---|---|
| var() | مقدار متغیرهای CSS را وارد کنید. |
- صفحه قبل متغیرهای CSS - JavaScript
- صفحه بعدی CSS @property
