28/08/2025
كتير من الفرونت اند ديفولوبرز لما بيجوا يعملوا خط responsive، بيعملوا ٣ أو ٤ media queries عشان يظبطوا المقاس بين الموبايل والتابلت واللابتوب.
تعالوا نشوف مثال 👇
❌ الشكل التقليدي (قبل)
h1 {
font-size: 1.5rem;
}
(min-width: 768px) {
h1 {
font-size: 2rem;
}
}
(min-width: 1200px) {
h1 {
font-size: 3rem;
}
}
الكود فوق بيشتغل، بس طويل ومحتاج تكتب Media Queries كتير
✅ باستخدام clamp() (بعد)
h1 {
font-size: clamp(1.5rem, 2vw, 3rem);
}
الكود ده معناه:
• أقل حجم للخط = 1.5rem
• الحجم المرن اللي بيتغير مع الشاشة = 2vw
• أكبر حجم للخط = 3rem
النتيجة : خط مرن (responsive) بيكبر ويصغر مع حجم الشاشة، من غير Media Queries كتير، والكود أنضف وأسهل في الصيانة.
الخلاصة: clamp() هيوفرلك وقت كبير في التحكم في الـ typography والـ spacing، وهيخلي الكود بتاعك أنظف وشغلك يبان بروفيشنال أكتر
