مولّد CSS clamp
أدخل عروض وأحجام الشاشة للشاشتين الصغيرة والكبيرة لتوليد CSS يغيّر حجم النص أو المسافات بسلاسة. عاين مخرجات px أو rem، ثم انسخ شيفرة CSS وكود Tailwind أو احفظهما كنص.
ما يمكنك فعله
حدد زوجين من العرض والحجم
حدد أحجامًا لإطار عرض صغير وإطار عرض كبير. يدعم 6 أنواع: حجم الخط، والفراغات، والحشو، والهامش، والعرض، والارتفاع.
أنشئ الشيفرة بوحدة px أو rem
أدخل جميع القيم بوحدة px، واختر px أو rem للإخراج. واحصل على تعريف CSS وشيفرة خاصية Tailwind العشوائية.
تحقق من CSS المُنتج فورًا
يطبق CSS على عنصرين في المعاينة. تحقق من كيف يظهر النص والتباعد عند عرض الإطار الحالي.
طريقة الاستخدام
اختر الخاصية المراد تغييرها
اختر خاصية CSS التي تريد تحديدها، مثل font-size لحجم النص أو gap للتباعد بين العناصر.
أدخل عرضَي إطار العرض وحجميهما
أدخل عرضي إطارَي العرض وحجم كل منهما بوحدة px. ويجب ألا يزيد حجم إطار العرض الأصغر عن حجم إطار العرض الأكبر.
تحقق من وحدة الإخراج وأنشئ
اختر px أو rem في الإعدادات المتقدمة. وبالنسبة إلى rem، تحقق أيضًا من حجم خط الأساس قبل الضغط على «إنشاء CSS».
عاين واحصل على الشيفرة
انسخ CSS والصقه حيث ستستخدمه. وافتح شيفرة Tailwind لاستخراجها. ويمكنك أيضًا نسخ العنصرين معًا أو حفظهما كنص.
مفيد عندما
غيّر أحجام العناوين بسلاسة
عندما تريد ضبط أحجام النص لإطارات عرض ضيقة وعريضة وتغييرها باستمرار بين هذين العرضين بدلًا من التغيير على مراحل.
اضبط التباعد حسب إطار العرض
عندما تريد أن تتغير فراغات البطاقات أو الحشو الداخلي ضمن الحد الأدنى والحد الأقصى اللذين تضبطهما.
تحديد الأحجام المرنة وقراءة المعاينة
القيم الثلاث في clamp
clamp دالة CSS تحدد قيمة دنيا وقيمة مرنة وقيمة قصوى. وتربط الصيغة المُنتجة نقطتين مرجعيتين بتعبير خطي وتحدّ الأحجام خارج النطاق بأحجام الطرفين.
الإدخال بوحدة px؛ والإخراج بوحدة px أو rem
يُدخل عرضا إطار العرض والحجمان بوحدة px. وفي إخراج rem، تُقسَم الأحجام والحد الثابت على حجم خط الأساس، بينما يُستخدم معامل vw لعرض إطار العرض دون تغيير.
طابق أساس rem مع مكان استخدام الشيفرة
افتراضيًا، تعتبر الشيفرة 1rem مساوية لـ 16px. وإذا اختلف حجم خط العنصر الجذر حيث تُستخدم الشيفرة، فسيختلف أيضًا أحجام الطرفين وكيفية تغير الحجم. تحقق منه حيث تستخدمه أيضًا.
إطار المعاينة يحدد عرض إطار العرض
المعاينة إطار عرض مستقل. يحسب vw من العرض داخل الإطار لا من عرض الشاشة كاملة. وبحسب الخاصية، يُطبَّق CSS المُنتج نفسه على النص أو الفراغ بين العنصرين أو التباعد أو أبعاد العناصر.
تحقق أيضًا من مكان استخدام الشيفرة
نص وبنية المعاينة ثابتان. تحقق أيضًا من الخطوط والنصوص الطويلة والتفاف الأسطر وتكبير النص في المتصفح حيث تستخدم الشيفرة. وتستخدم شيفرة Tailwind صيغة الخاصية العشوائية؛ تحقق أيضًا من أنها مُكتشفة ومُنتجة حيث تستخدمها.
الأسئلة الشائعة
ماذا يحدث خارج نطاق عرض إطار العرض المحدد؟
العرض الأضيق من العرض الأصغر المحدد يستخدم الحجم الأدنى، والعرض الأوسع من العرض الأكبر المحدد يستخدم الحجم الأقصى. وبالنسبة إلى rem، يجب أن تستخدم حجم خط الأساس نفسه المستخدم عند إنشاء الشيفرة.
ما حجم خط الأساس لـ rem؟
يحدد عدد البكسل المستخدمة لحساب 1rem. القيمة الافتراضية 16px، ويمكنك تغييرها إلى 1–1000px في الإعدادات المتقدمة. طابق حجم خط العنصر الجذر حيث ستستخدم الشيفرة.
هل يمكنني تحديد أحجام متساوية أو قيم سالبة؟
اضبط الحد الأدنى والأقصى على القيمة نفسها للحصول على حجم ثابت. القيم السالبة مسموح بها للهامش فقط. والأحجام التي تنقص كلما اتسع إطار العرض غير مدعومة.
هل تُطبَّق التغييرات على الخصائص أو القيم فورًا؟
تغييرها يمسح الشيفرة والمعاينة المُنتجتين. اضغط «إنشاء CSS» لتحديثهما. وينطبق الأمر نفسه عند تغيير وحدة الإخراج أو حجم خط الأساس.
هل يمكنني تغيير نص المعاينة؟
النص النموذجي وAa 123 ثابتان كلاهما. ولا توجد ميزة لتحرير النص. تحقق أيضًا من النص الفعلي وعرض العرض في الصفحة التي تستخدم CSS المُنتج.
الإدخال والنتائج
- عرض إطار العرض
- 1–100000px. يجب أن يكون عرض إطار العرض الأصغر أقل من الأكبر. وتُقبل القيم العشرية أيضًا.
- الحجم
- 0–10000px. الهامش فقط يمكن أن ينخفض حتى −10000px. ويجب ألا يزيد حجم إطار العرض الأصغر عن حجم إطار العرض الأكبر.
- الإخراج
- تعريف CSS وخاصية Tailwind عشوائية. احفظ العنصرين معًا باسم css-clamp-generator.txt.
- الدقة
- تستخدم الصيغة المُنتجة معاملات تصل إلى 13 رقمًا ذي دلالة. ويحدث خطأ للعرضين المتقاربين كثيرًا بحيث لا تستطيع الصيغة المقرّبة إعادة إنتاج النقطتين المرجعيتين، على سبيل المثال.