CSS - Math Functions دوال الرياضيات
CSS - دوال الرياضيات (Math Functions)
🔸 توفر CSS مجموعة من الدوال الرياضية التي تتيح لك إجراء عمليات حسابية مباشرة داخل ملف CSS، مما يُسهل التعامل مع القياسات بطريقة ديناميكية ومرنة.
---🔹 1. calc() - الحسابات
تُستخدم لإجراء عمليات حسابية بين وحدات مختلفة مثل % و px و em.
.box {
width: calc(100% - 50px);
}
📌 هذه القاعدة تعني أن عرض العنصر سيكون 100% ناقص 50px.
---🔹 2. min() - أصغر قيمة
تُرجع أصغر قيمة بين القيم المحددة.
.box {
width: min(50%, 400px);
}
📌 سيتم تطبيق أصغر قيمة بين 50% من عرض الحاوية و400px.
---🔹 3. max() - أكبر قيمة
تُرجع أكبر قيمة بين القيم المحددة.
.box {
width: max(300px, 30%);
}
📌 سيتم تطبيق القيمة الأكبر بين 300px و30% من عرض الحاوية.
---🔹 4. clamp() - النطاق المحدد
تُستخدم لتحديد قيمة تتغير ضمن حد أدنى وحد أقصى.
.box {
font-size: clamp(16px, 2vw, 24px);
}
📌 هذا يعني أن حجم الخط سيتغير مع عرض الشاشة ولكن لن يقل عن 16px ولن يزيد عن 24px.
---📌 ملاحظات هامة
- ضع مسافات حول العمليات الحسابية داخل
calc()لتجنب الأخطاء. - يمكنك دمج الدوال معًا في نفس الخاصية.
- هذه الدوال مدعومة في جميع المتصفحات الحديثة.
تعليقات
إرسال تعليق