مولد CSS clamp للخطوط المرنة

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

1. أدخل الحجم الأصغر، الحجم الأكبر، عرض الشاشة الأصغر، عرض الشاشة الأكبر، حجم خط الجذر والوحدة.
2. تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
3. انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.

طريقة الحساب

الميل = (الحجم الأكبر - الحجم الأصغر) ÷ (العرض الأكبر - العرض الأصغر). نقطة البداية = الحجم الأصغر - الميل × العرض الأصغر. القيمة = clamp(الأصغر, نقطة البداية + الميل × 100vw, الأكبر)، وrem = px ÷ حجم خط الجذر.

مثال

المدخلات: الحجم الأصغر = 16 px، الحجم الأكبر = 24 px، عرض الشاشة الأصغر = 320 px، عرض الشاشة الأكبر = 1,280 px، حجم خط الجذر = 16 px. النتيجة: قيمة clamp: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)، الميل: 0.8333 vw، نقطة البداية: 13.3333 px.

الحدود والملاحظات

• القيم مقربة إلى 4 منازل عشرية، والفرق أقل من جزء من البكسل.
• استخدام rem مع vw يحافظ على تكبير المتصفح أفضل من px وحدها، لكنه لا يضمن تكبير ⁦200%⁩ في كل الحالات.