مولّد clamp() للأحجام المرنة

طريقة الاستخدام

1. اختر الخاصية، واكتب أصغر حجم وأكبر حجم، ثم اختر وحدة الأحجام.
2. اكتب العرضين في عرض الشاشة حيث يكون الحجم أصغر ما يمكن وعرض الشاشة حيث يكون الحجم أكبر ما يمكن، واختر وحدتهما.
3. إذا استعملت rem في أي مكان، فتحقق من حجم الخط الجذري (px). تستعمل المتصفحات 16 px ما لم يضبط الموقع حجماً آخر.
4. انسخ تعريف CSS، أو راجع خطوات الحساب والحجم عند أعراض شائعة للشاشة لترى النتيجة عند كل عرض.

كيف يجعل clamp() الحجم مرناً

تأخذ clamp(MIN, VAL, MAX) حداً أدنى وقيمة مفضلة وحداً أعلى. وتنص مواصفة قيم CSS ووحداتها (باللغة الإنجليزية) على أنها تمثل القيمة نفسها التي تمثلها max(MIN, min(VAL, MAX)). فلا ينزل الحجم عن MIN ولا يرتفع عن MAX، وفيما بينهما يتبع VAL، وهي هنا خط مستقيم يعتمد على عرض الشاشة.

يمتد الخط من أصغر حجم عند أضيق عرض إلى أكبر حجم عند أعرض عرض. وخارج هذين العرضين يبقى الحجم كما هو.

الميل = (أكبر حجم − أصغر حجم) ÷ (أكبر عرض − أصغر عرض)؛ نقطة التقاطع = أصغر حجم − الميل × أصغر عرض؛ القيمة المفضلة = نقطة التقاطع + الميل × 100vw

الميل ونقطة التقاطع وحد عرض الشاشة

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

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

• اجعل أكبر حجم أكبر من أصغر حجم أو مساوياً له. ترفض الأداة حجماً أكبر أصغر، لأن مثل هذا الخط يتقلص كلما كبرت الشاشة.
• لا يتبع حدّ vw إعداد حجم النص عند الزائر، أما نقطة التقاطع بوحدة rem فتتبعه. اختبر الصفحة عند تكبير 200٪، واجعل نقطة التقاطع بوحدة rem حيثما أمكن.

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