مولد المشبك CSS

يقوم مولد مشبك CSS () ببناء إعلان مشبك واحد (الحد الأدنى، المفضل، الحد الأقصى) الذي يقوم بقياس القيمة بسلاسة بين عرضين للشاشة. بدلاً من كتابة العديد من استعلامات الوسائط لتحريك عنوان من 24 بكسل على الهواتف إلى 48 بكسل على أجهزة الكمبيوتر المكتبية، يمكنك تعيين الحد الأدنى للحجم والحد الأقصى للحجم ونطاق إطار العرض الذي يتم تعيينه إليه، ويقوم المولد بإرجاع سطر واحد من CSS الذي يقحم كل حجم بينهما.

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

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

يحتوي تحجيم السوائل على مصيدة إمكانية وصول واحدة تستحق تجنبها عمدًا. يتجاهل تعبير المشبك الذي يتم التعبير عن حده الأوسط فقط في وحدات إطار العرض إعداد حجم خط القارئ، لأن vw لا يستجيب له، والنص الذي لا يمكن أن ينمو يفشل WCAG 1.4.4. إن الاحتفاظ بمكون rem في القيمة المفضلة، وهو ما يفعله الإخراج الذي تم إنشاؤه، يعني أن الحجم لا يزال يستجيب لتكبير المتصفح ولخط افتراضي أكبر. قم دائمًا بتعيين كلا الحدين: بدونهما يتم قياس القيمة دون حدود في أي من الاتجاهين.

هنا مولد المشبك CSS على عنوان حقيقي. أدخل 24 و48 بكسل كمقاييس، 360 و1440 كمنافذ عرض، واحتفظ بالجذر 16 بكسل، واضغط على إنشاء المشبك (). الإخراج هو حجم الخط: المشبك (1.5rem، 1rem + 2.2222vw، 3rem)؛. يؤكد جدول المعاينة ذلك: 24 بكسل عند 360، 33.07 بكسل عند 768، 38.76 بكسل عند 1024 و48 بكسل عند 1440. تحت 360 يبقى العنوان عند 1.5ريم وفوق 1440 يتوقف عند 3ريم، وهو النقطة الأساسية للطباعة السائلة ذات الحدود.