تصميم / متجاوب
مولد CSS Clamp() للطباعة والتباعد المرنين
أدخل أصغر وأكبر حجم، وعرضَي الشاشة اللذين ينطبقان عليهما، واحصل على تعبير clamp() بوحدة rem يتدرج بسلاسة بينهما، مع جدول يوضح الحجم عند عروض الشاشة الشائعة.
مولد CSS Clamp() للطباعة والتباعد المرنين: ترسم الأداة خطًا مستقيمًا يمر بالنقطتين: من 16 px عند عرض شاشة يبلغ 320 px إلى 24 px عند 1280 px، يزداد الحجم بمقدار 0.8333 px لكل 100 px من العرض. يُكتب الخط على هيئة جزء ثابت بوحدة rem بالإضافة إلى جزء بوحدة vw، 0.8333rem + 0.8333vw، وتحافظ clamp() على الحجم بين 1rem و1.5rem خارج هذا النطاق. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.
- الفئة
- أدوات المطورين
- مرات التشغيل
- في المتصفح
- التكلفة
- مجاني · بلا تسجيل
- التوفر
- جاهز للاستخدام
تعمل بالكامل في المتصفح
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| عرض نافذة العرض | الحجم |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 800 px | 20 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
القيمة الوسطى في clamp() هي خط مستقيم يمر بالنقطتين اللتين تحددهما: فهي تضيف مقدارًا ثابتًا بوحدة rem إلى جزء من عرض نافذة العرض، ما يجعل الحجم يتدرج بسلاسة بين العرضين ويتوقف عند الحدين خارجهما. يؤدي استخدام rem للجزء الثابت إلى إبقاء الحجم متجاوبًا مع إعداد حجم الخط الخاص بالقارئ. يعمل ذلك مع أي طول، مثل أحجام الخطوط أو الحشو أو الفجوات أو الهوامش.
مثال تطبيقي
لعنوان حجمه 32 px على هاتف بعرض 375 px وحجمه 48 px على سطح مكتب بعرض 1440 px، يكون الميل 16 ÷ 1065 = 1.5023 px لكل 100 px، ويكون التعبير clamp(2rem, 1.6479rem + 1.5023vw, 3rem). وعلى جهاز لوحي بعرض 800 px، يكون حجم العنوان 38.38 px.
إمكانية الوصول
تشترط WCAG إمكانية تكبير النص إلى 200%. وبما أن جزءًا من الحجم المرن يعتمد على مساحة العرض، فقد تمنع الميول الحادة جدًا التكبير من جعل النص أكبر بكثير؛ حافظ على ألا يتجاوز الحجم الأكبر نحو 2.5 ضعف الحجم الأصغر، واستخدم مولّد مقياس الخطوط لاختيار خطوات متسقة.
طريقة الاستخدام
- أدخل أصغر وأكبر حجم بوحدة px.
- أدخل عرضَي الشاشة اللذين ينبغي تطبيقهما.
- انسخ قيمة clamp() وتحقق من الأحجام في الجدول.
الخصوصية والقيود
تُجرى الحسابات في المتصفح.
أدوات ذات صلة
الأسئلة الشائعة
لماذا لا أستخدم vw فقط؟
يتجاهل الحجم المحدد بوحدة vw وحدها إعداد حجم الخط لدى القارئ، وقد يصبح صغيرًا جدًا على الهواتف أو كبيرًا جدًا على الشاشات العريضة. يعالج جزء rem والحدود في clamp() المشكلتين.
هل تعمل clamp() في كل مكان؟
نعم، تدعم كل المتصفحات الحالية clamp() منذ 2020.
هل يمكن أن يصغر الحجم على الشاشات الأوسع؟
نعم، أدخل حجمًا أكبر عند أصغر عرض، وسيطرح التعبير جزء vw بدلًا من إضافته.
أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا