حاسبة CSS Clamp()

يتيح مشبك CSS (MIN، PREFERRED، MAX) لإعلان واحد استبدال مجموعة كاملة من استعلامات الوسائط: تظل القيمة عند MIN أسفل أصغر إطار عرض، وعند MAX فوق الأكبر، وتتدرج بسلاسة بينهما. الجزء الصعب هو المصطلح المفضل - وهو تعبير نسبي لإطار العرض مثل 0.833rem + 0.833vw - الذي لا يريد أحد استخلاصه يدويًا. تقوم هذه الآلة الحاسبة بحسابها بشكل حقيقي من خلال أربعة أرقام: الحد الأدنى للحجم والحد الأقصى للحجم وعرض إطار العرض الذي ينطبق عليه كل رقم.

يتم عرض كل رقم متوسط، وليس فقط السطر الأخير: الميل (عدد وحدات الحجم التي تنمو بها القيمة لكل بكسل من إطار العرض)، وهذا المنحدر نفسه معبرًا عنه بمعامل vw، وتقاطع المحور y — الثابت المضاف إلى مصطلح vw بحيث يمر الخط عبر النقطتين اللتين حددتهما بالضبط. يمكن لأي شخص قام بلصق قيمة المشبك () من البرنامج التعليمي دون فهمها أن يرى العمليات الحسابية الفعلية هنا ويتحقق منها.

يقوم شريط تمرير عرض إطار العرض بتشغيل مربع معاينة مباشر، بحيث يكون مقياس السوائل مرئيًا، وليس محسوبًا فقط: اسحبه بين نقطتي التوقف الدنيا والحد الأقصى وشاهد نموذج النص يتغير حجمه تمامًا كما هو الحال أثناء تغيير حجم نافذة المتصفح الحقيقية. يتم تحديث خط الإخراج والتفاصيل عند كل ضغطة مفتاح - يقترن هذا بشكل طبيعي مع محول px إلى rem عندما يحتاج حجم الخط الأساسي نفسه إلى التحويل أيضًا.

قم بالتبديل إلى وضع مقياس الكتابة لنظام طباعة مائع كامل في خطوة واحدة: أدخل حجمًا أساسيًا ونسبة معيارية (1.125 إلى 1.5) واحصل على ستة أحجام - صغير وأساسي وh4 وh3 وh2 وh1 - يتم حساب كل منها على شكل خط clip() خاص به بين تقدم الهاتف المحمول اللطيف ونسبة سطح المكتب الكاملة، جاهزة للنسخ ككتلة من خصائص CSS المخصصة.