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 |
توابع CSS var()
| توابع | توضیح |
|---|---|
| var() | مقدار متغیر CSS را وارد کنید. |
- صفحه قبلی CSS متغیرها - JavaScript
- صفحه بعدی CSS @property
