CSS توفر دوال رياضية قوية تتيح حسابات ديناميكية:
**calc():** حسابات بمزج وحدات مختلفة. `width: calc(100% - 240px);` `padding: calc(var(--spacing) * 2);`
**min():** أصغر قيمة من مجموعة قيم. `width: min(90%, 600px);` — يأخذ الأصغر
**max():** أكبر قيمة من مجموعة. `font-size: max(16px, 2vw);` — لا يصغر عن 16px
**clamp(min, preferred, max):** يثبّت القيمة بين حد أدنى وأقصى. `font-size: clamp(1rem, 2.5vw, 2rem);` يعني: لا يصغر عن 1rem، ولا يكبر عن 2rem، وبينهما يتكيف مع العرض.
**clamp هو مستقبل التصميم المتجاوب** — يُنشئ نصوصاً وعناصر تتكيف بسلاسة مع كل الشاشات بدون media queries.
| 1 | /* حاوية تطرح الـ sidebar */ |
| 2 | .content { width: calc(100% - 260px); } |
| 3 | |
| 4 | /* خط متجاوب سلس */ |
| 5 | h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); } |
| 6 | |
| 7 | /* عرض بحد أقصى */ |
| 8 | .section-img { width: min(100%, 800px); } |
مثال 1: Typography متجاوبة بـ clamp
| 1 | :root { |
| 2 | --text-sm: clamp(0.875rem, 1.5vw, 1rem); |
| 3 | --text-base: clamp(1rem, 2vw, 1.125rem); |
| 4 | --text-lg: clamp(1.125rem, 2.5vw, 1.375rem); |
| 5 | --text-xl: clamp(1.25rem, 3vw, 1.75rem); |
| 6 | --text-2xl: clamp(1.5rem, 4vw, 2.5rem); |
| 7 | --text-3xl: clamp(2rem, 5vw, 3.5rem); |
| 8 | --text-4xl: clamp(2.5rem, 7vw, 5rem); |
| 9 | } |
| 10 | |
| 11 | h1 { font-size: var(--text-4xl); } |
| 12 | h2 { font-size: var(--text-3xl); } |
| 13 | p { font-size: var(--text-base); } |
| 14 | |
| 15 | /* padding متجاوب */ |
| 16 | .section { |
| 17 | padding: clamp(32px, 8vw, 96px) clamp(16px, 5vw, 64px); |
| 18 | } |