مولّد CSS clamp() مجانًا
أنشئ قيمة CSS clamp() المرنة للخطوط والمسافات سريعة الاستجابة. حدّد الحجم الأدنى/الأقصى ونطاق نافذة العرض، وشاهد معاينة مباشرة، وانسخ سطر CSS الواحد.
الحجم المعروض عند منافذ عرض مختلفة
تقيس clamp(min, preferred, max) القيمة بمرونة مع عرض نافذة العرض، ثم تثبّتها عند الحد الأدنى والأقصى. وتستبدل مجموعات من استعلامات الوسائط للخطوط والمسافات والعروض بسطر واحد.
الاستخدامات الشائعة
- إنشاء طباعة سريعة الاستجابة سائلةمقاييس أحجام الخطوط بسلاسة بين الهاتف المحمول وسطح المكتب بسطر واحد.
- الهوامش والحشوة السائلةاجعل فسحة القسم تنمو مع ميناء العرض بدلاً من القفز عند نقاط الانقطاع.
- استبدال الاستعلامات الإعلامية مع clamp()انهيار مكدسات تجاوزات نقطة الانقطاع إلى قيمة سائلة واحدة.
- بناء مقياس نوع سائلتوليد خطوات clamp() متسقة لمقياس نوع نظام التصميم.
- العناوين البطل والعرض السائلاجعل كبر عناوين الصفحات الرئيسية تتسع بشكل درامي لكن آمن.
كيف يعمل
تحسب هذه الأداة قيم CSS clamp() باستخدام معادلة استيفاء خطي مكتوبة يدويًا — لا مكتبات ولا ذهاب وإياب إلى خادم. تُدخل حجمين وعرضي نافذة عرض؛ فتعمل الحسابات فورًا في متصفحك وتنتج تعبير clamp() جاهزًا للصق بقيمة مفضلة مبنية على vw تغيّر حجم النص أو المسافات بسلاسة بين نقطتي التوقف.
- 1حساب الميل الخطيتحسب الأداة ميلًا بكسل لكل بكسل: (maxSize - minSize) / (maxViewport - minViewport). ثم يُحوَّل هذا الميل إلى وحدات vw بالضرب في 100، وهذا هو جوهر عمل التحجيم النسبي لنافذة العرض في CSS.
- 2استخراج نقطة التقاطعتُحسب إزاحة نقطة التقاطع (بالـ px أو rem) بحيث تصل الدالة الخطية تمامًا إلى حدك الأدنى عند أصغر نافذة عرض. ويشكّل الميل ونقطة التقاطع معًا القيمة المفضلة داخل clamp() — الجزء الذي يتغير حجمه فعلًا.
- 3تحويل الوحدات وتنسيق الإخراجإذا اخترت إخراج rem، تُقسم كل قيمة بكسل على حجم الخط الجذري المضبوط (الافتراضي 16px) قبل كتابتها في سلسلة clamp(). ويُنتج أيضًا صنف Tailwind مطابق ذو قيمة اعتباطية، تُستبدل فيه المسافات بشرطات سفلية وفق صياغة Tailwind.
- 4معاينة مباشرة بمنزلق نافذة العرضيتيح لك منزلق نطاق التمرير من عرض 320px إلى 1920px. عند كل موضع، تحسب معادلة الميل ونقطة التقاطع نفسها الحجم المقيّد في الوقت الفعلي وتعرض نصًا نموذجيًا بذلك الحجم المحسوب بالبكسل، فترى سلوك التحجيم قبل نسخ أي شيء.
أدوات ذات صلة
مولد شبكة CSS
قم بتصميم شبكة CSS بصريًا — المسارات والوحدات والفجوات — ونسخ CSS و HTML التي تم إنشاؤها.
ما هي دقة شاشتي
شاهد دقة شاشتك بـ CSS والبكسلات الحقيقية، وحجم النافذة، ونسبة البكسل، وعمق اللون، و HDR، ودعم اللمس ومعدل التحديث، وانسخ كل ذلك.
صانع التوقيع
ارسم توقيعًا بالفأرة أو الإصبع أو القلم، أو اكتب اسمك بخط يدوي، ثم صدّره كصورة PNG شفافة أو SVG.