حاسبة الطباعة المرنة — CSS clamp()
أنشئ دالة CSS clamp() تُغيّر حجم الخط بسلاسة بين عرضي إطار عرض — دون الحاجة إلى نقاط توقف (breakpoints).
750 مشاهدة
يجب أن تكون القيم القصوى أكبر من القيم الدنيا
معاينة مباشرة (غيّر عرض النافذة):
Almost before we knew it, we had left the ground.
وصفة clamp()
تتدرّج الطباعة المرنة خطيًا بين حجم أدنى عند إطار عرض صغير وحجم أقصى عند إطار عرض كبير: الميل = (أقصى حجم خط − أدنى حجم خط) ÷ (أقصى إطار عرض − أدنى إطار عرض)، ثم font-size: clamp(minRem, interceptRem + slope·100vw, maxRem). لتغيير الحجم من 16 إلى 24 بكسل بين إطاري عرض 375 و1280 بكسل، تكون النتيجة clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — أي 16 بكسل بالضبط عند 375، و24 بكسل بالضبط عند 1280، وتدرّج سلس بينهما، وثبات خارج النطاق.
يُعد جزء rem في القيمة المفضّلة مهمًا لإمكانية الوصول: فالصيغة القائمة على vw فقط تتجاهل إعداد حجم الخط في متصفح المستخدم تمامًا، بينما يحافظ تقاطع rem على عمل التكبير وتفضيلات النص الكبير. تُنتج هذه الأداة دائمًا الصيغة المختلطة.
الأسئلة الشائعة
أي نطاق إطار عرض يجب أن أستخدمه؟
من 375 بكسل (هاتف شائع) إلى أقصى عرض لمحتواك — غالبًا 1200-1440 بكسل. خارج هذا النطاق تتجمد clamp() عند الحد الأدنى أو الأقصى، لذا لا ينكسر شيء على الساعات الذكية أو الشاشات فائقة الاتساع.
هل يمكنني استخدام هذا للمسافات أيضًا؟
نعم — تعمل نفس الحسابات مع الحشو (padding) والهوامش (margins) والفجوات (gaps). أنشئها بقيم المسافة الدنيا والقصوى الخاصة بك وضع clamp() في خاصية مخصصة.
لماذا لا يكون نصي بالحجم الأدنى تمامًا على هاتفي؟
تحقق من عرض إطار عرض CSS الفعلي (بكسلات الجهاز ÷ DPR). هاتف بعرض "390 بكسل" أوسع من بداية النطاق البالغة 375 بكسل، لذا يكون الحجم بالفعل أعلى قليلاً من الحد الأدنى — وهذا مقصود.
أدوات مشابهة
الإبلاغ عن مشكلة
حاسبة الطباعة المرنة — CSS clamp()