حاسبة ()Clamp في CSS
احسب قيمة CSS فعلية مائعة باستخدام ()clamp من حجم أدنى وأقصى عبر عرضي نافذة عرض، مع عرض الميل والتقاطع خطوة بخطوة ومعاينة تغيير حجم مباشرة.
🔒 تتم معالجتها بالكامل في متصفحك — ولا يتم تحميل أي شيء تدخله هنا على الإطلاق.
النتيجة
تسمح ()clamp في CSS (MIN, PREFERRED, MAX) لإعلان واحد بأن يحل محل مجموعة كاملة من استعلامات الوسائط: تبقى القيمة عند MIN تحت أصغر نافذة عرض، وعند MAX فوق أكبرها، وتتدرج بسلاسة بينهما. الجزء الصعب هو تعبير PREFERRED — مثل 0.833rem + 0.833vw — الذي لا يريد أحد أن يشتقه يدوياً. تحسبه هذه الحاسبة فعلياً من أربعة أرقام: حجم أدنى، حجم أقصى، وعرض نافذة العرض الذي ينطبق عنده كل منهما.
كل رقم وسطي يُعرض، وليس فقط السطر النهائي: الميل (كم وحدة حجم تنمو القيمة لكل بكسل من عرض نافذة العرض)، ونفس الميل معبراً عنه كمعامل vw، وتقاطع المحور الصادي — الثابت المضاف إلى تعبير vw ليمر الخط تماماً عبر النقطتين اللتين حددتهما. أي شخص قام بلصق قيمة ()clamp من درس تعليمي دون فهمها يمكنه هنا رؤية العملية الحسابية الفعلية والتحقق منها.
يقود شريط تمرير عرض نافذة العرض مربع معاينة مباشرة، ليكون التدرج المائع مرئياً، وليس محسوباً فقط: اسحبه بين نقطتي التوقف الدنيا والقصوى وشاهد نص العينة يتغير حجمه تماماً كما يحدث عند تغيير حجم نافذة متصفح حقيقية. سطر الإخراج والتحليل يتحدثان مع كل ضغطة مفتاح — يقترن هذا طبيعياً مع محول px إلى rem عندما يحتاج حجم الخط الأساسي نفسه إلى تحويل أيضاً.
انتقل إلى وضع سلم الطباعة للحصول على نظام طباعة مائع كامل في خطوة واحدة: أدخل حجماً أساسياً ونسبة قياسية (1.125 حتى 1.5) واحصل على ستة أحجام — صغير، قاعدة، h4، h3، h2 و h1 — كل منها محسوب كخط ()clamp خاص به بين تدرج ألطف للجوال ونسبة سطح المكتب الكاملة، جاهزة للنسخ ككتلة خصائص CSS مخصصة.