CSS باستخدام المتغيرات في استعلامات الوسائط
استخدام المتغيرات في استعلامات الوسائط
الآن نريد تغيير قيمة متغيرة داخل استعلام وسائط.
نصيحة: تتعلق استعلامات الوسائط بتحديد قواعد أنماط مختلفة للأجهزة المختلفة (الشاشات والأجهزة اللوحية والهواتف المحمولة وما إلى ذلك). يمكنك معرفة المزيد من استعلامات الوسائط في فصل استعلامات الوسائط .
هنا ، نعلن أولاً عن متغير محلي جديد يسمى --fontsize
.containerللفئة. قمنا بتعيين قيمته على 25 بكسل. ثم نستخدمه في
.containerالفصل أسفل. بعد ذلك ، نقوم بإنشاء
@mediaقاعدة تقول "عندما يكون عرض المتصفح 450 بكسل أو أكثر ، قم بتغيير قيمة متغير حجم الخط
.containerللفئة إلى 50 بكسل."
هذا هو المثال الكامل:
مثال
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
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;
}
}
فيما يلي مثال آخر حيث قمنا أيضًا بتغيير قيمة المتغير الأزرق في @mediaالقاعدة:
مثال
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
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()الوظيفة بشكل كامل.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
وظيفة CSS var ()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |