مولّد clamp() في CSS

ما هي مولّد clamp() في CSS؟

مولّد clamp() في CSS هو حاسبة مجانية للطباعة المرنة لمطوّري الواجهة الأمامية والمصممين. تمنحه حجم خط أدنى وحجم خط أقصى وعرض إطار عرض أدنى وعرض إطار عرض أقصى؛ فيُعيد تصريح clamp(min, preferred, max) حيث تمزج القيمة المفضلة إزاحة rem مع ميل vw، فينمو النص خطيًا مع الشاشة ولا يتجاوز حدودك أبدًا. هذا يلغي الحاجة إلى استعلامات وسائط font-size المتراكمة ويُبقي العناوين ونصوص المتن متجاوبة على كل جهاز. اختر حجم معاينة لترى كيف تُعرض القيمة، بدّل وحدة الإخراج بين rem وpx، وانسخ السطر مباشرة إلى ورقة الأنماط لديك.

كيفية استخدام مولّد clamp() في CSS

1. أدخل حجم الخط الأدنى — الحجم الذي يجب أن يكون عليه النص على أصغر شاشة.
2. أدخل حجم الخط الأقصى — الحجم الذي يجب أن يبلغه النص على أكبر شاشة.
3. اضبط عرضي إطار العرض الأدنى والأقصى اللذين ينبغي أن يتدرّج الحجم بينهما.
4. افتح الإعدادات لتبديل وحدة الإخراج (rem يحافظ على إمكانية الوصول؛ وpx متاح أيضًا) إن كنت تفضّل ذلك.
5. اختر حجم معاينة لعرض نص تجريبي عند إطار العرض ذاك، ثم اقرأ قيمة clamp() المباشرة.
6. انسخ تعبير clamp() المُولَّد والصقه في font-size في CSS لديك.

أمثلة

خط أدنى 16، خط أقصى 20، vw أدنى 320، vw أقصى 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

خط أدنى 32، خط أقصى 64، vw أدنى 320، vw أقصى 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

خط أدنى 12، خط أقصى 14، vw أدنى 480، vw أقصى 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

الأسئلة الشائعة

كيف تتدرّج قيمة clamp() دون استعلامات وسائط؟

تأخذ clamp(min, preferred, max) حدًا أدنى وقيمة مفضلة (مرنة) وحدًا أقصى. القيمة المفضلة هي خط من الشكل rem + vw، محسوب بحيث يساوي الخط حدّك الأدنى عند إطار العرض الأدنى وحدّك الأقصى عند إطار العرض الأقصى. بين هذين العرضين يستوفي المتصفح تلقائيًا، وخارجهما تثبّت clamp() الحجم عند الحدّ الأقرب — كل ذلك في تصريح واحد.

لماذا الإخراج بوحدة rem بدلاً من px؟

استخدام rem للأجزاء الثابتة يحترم إعداد حجم خط متصفح المستخدم، وهو أفضل لإمكانية الوصول. يُعبَّر عن الميل النسبي لإطار العرض بوحدة vw. يمكنك تبديل الوحدة إلى px في الإعدادات إذا كان مشروعك يحتاج وحدات مطلقة، لكن rem هو الإعداد الافتراضي المُوصى به.

أي نطاق إطار عرض ينبغي أن أستخدم؟

الاختيار الشائع هو أصغر عرض مدعوم لديك (غالبًا 320px أو 360px) للحدّ الأدنى وأوسع حاوية محتوى لديك (مثل 1240px–1536px) للحدّ الأقصى. يكون الخط مرنًا بالكامل فقط داخل هذا النطاق؛ أسفله يبقى النص عند الحدّ الأدنى وفوقه عند الحدّ الأقصى.

هل يعمل هذا مع أي طول في CSS، وليس فقط font-size؟

نعم. قيمة clamp() المُولَّدة هي مجرد طول، لذا يمكنك لصقها في padding أو margin أو gap أو أي خاصية تقبل طولًا. تذكر التسميات font-size لأن الطباعة المرنة هي الاستخدام الأكثر شيوعًا، لكن الرياضيات مطابقة للتباعد.

هل تُرسَل بياناتي إلى أي مكان؟

لا. يجري الحساب بالكامل في متصفحك بلغة JavaScript — لا تُرفع أحجام خطوطك وأعراض إطار العرض إلى أي خادم أبدًا، لذا تعمل الأداة بخصوصية وحتى دون اتصال بعد تحميل الصفحة.