استخدام متغيرات CSS في الاستعلامات الإعلامية
- الصفحة السابقة متغيرات CSS - JavaScript
- الصفحة التالية CSS @property
استخدام المتغيرات في الاستعلام الإعلامي
الآن، نريد تعديل قيمة المتغير في الاستعلام الإعلامي.
نصيحة:الاستعلامات الإعلامية مصممة لتعريف قواعد النمط المختلفة للأجهزة المختلفة (الشاشات، الأجهزة اللوحية، الهواتف الذكية، إلخ). يمكنك تعلم المزيد عن الاستعلامات الإعلامية في فصل "الاستعلامات الإعلامية".
في هذا المثال، نبدأ أولاً بتعريف متغير جديد محلي يُدعى --fontsize لفئة .container. نضعه في 25 بكسل. ثم نستخدمه في فئة .container. ثم، ننشئ قاعدة @media تحتوي على محتوى "عندما يكون عرض المتصفح 450px أو أوسع، قم بتعديل قيمة متغير --fontsize لفئة .container إلى 50px."
هذا هو المثال الكامل:
实例
/* 变量声明 */
: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
