حاسبة CSS clamp()

تُدخل نقطتين: حجمًا عند عرض شاشة صغير وحجمًا عند عرض شاشة كبير. ترسم الأداة خطًا مستقيمًا بينهما كي ينمو الحجم بسلاسة مع اتساع الشاشة، ثم تضعه داخل clamp() حتى لا يقل عن حجم الشاشة الصغيرة ولا يزيد على حجم الشاشة الكبيرة. بين العرضين يتغير الحجم بسلاسة، وخارجهما يثبت عند أقرب حد.

تُكتب الحدود بوحدة rem، ويحتفظ الجزء الأوسط المتغير بمكوّن rem، لذلك يظل النص قابلًا للتكبير عندما يقرّب القارئ الصفحة أو يرفع حجم الخط الافتراضي في المتصفح — وهو ما قد تمنعه قيمة تعتمد على البكسل أو إطار العرض وحده. تُدخل الأحجام بالبكسل لأنها الصيغة المألوفة لمعظم الأشخاص، وتحولها الأداة إلى rem باستخدام حجم الخط الجذر.

نعم. تعمل القيمة نفسها مع padding أو margin أو gap أو العرض أو الارتفاع — أي موضع يقبل قيمة طول. بدّل المعاينة إلى «صندوق» لترى المسافة تكبر بدلًا من النص. وإذا تساوى الحجمان الصغير والكبير، تصبح النتيجة طولًا ثابتًا عاديًا لعدم وجود فرق يمكن تدرّجه.

نعم، تدعم جميع المتصفحات الحالية clamp() منذ عام 2020، لذا يمكنك استخدام القيمة كما هي من دون قيمة احتياطية. وإذا كان الحد الأقصى كبيرًا جدًا أو كان معدل التغير سريعًا، فمن المفيد التحقق عند تكبير الصفحة إلى 200% من أن النص ما زال يكبر للقراء الذين يحتاجون إليه.