مولّد مقاسات خطوط مرنة
احسب مقياس عناوين وفقرات وقيم CSS clamp بين عرضي شاشة تحددهما.
ابدأ من
يبقى النص بالحجم الأدنى حتى عرض الهاتف، ثم يكبر بانتظام، ويثبت عند الحجم الأقصى ابتداءً من العرض العريض.
النتيجة
اكتب أصغر حجم وأكبر حجم لتحصل على CSS.
| الشاشة | حجم النص | مثال |
|---|
يستخدم CSS وحدة rem ويفترض الحجم الافتراضي للمتصفح 16 بكسل. إن كبّر الزائر حجم النص الافتراضي كبر النص معه.
طريقة الاستخدام
- اختر نموذجًا أو اكتب أصغر حجم وأكبر حجم بالبكسل.
- اكتب عرض شاشة الهاتف والشاشة العريضة.
- انسخ CSS وراجع الأحجام في الجدول.
أمثلة
- نص الفقراتمن 16 إلى 20 بكسل، بعرض 320 إلى 1200 clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem)
- عنوان كبيرمن 16 إلى 64 بكسل، بعرض 320 إلى 1200 clamp(1rem, 5.4545vw - 0.0909rem, 4rem)
تفاصيل الأداة والخصوصية
احصل على حجم خط CSS بدالة clamp() يكبر بسلاسة من شاشة الهاتف إلى الشاشة العريضة، وشاهد الحجم على عروض شائعة.
سطر CSS واحد يغني عن عدة استعلامات وسائط لحجم النص.
الخيارات
- أعداد صحيحة بالبكسل من 1 إلى 4,000. الأقصى لا يقل عن الأدنى، والعرض العريض أكبر من عرض الهاتف.
الحدود
- تفترض rem الحجم الافتراضي للمتصفح 16 بكسل.
- يضبط حجمًا واحدًا لا سلّم خطوط كاملًا.
الخصوصية
ما تكتبه يبقى في متصفحك. لا يُرفع شيء ولا يُحفظ على الخادم.
أسئلة
ما نتيجة 16 إلى 20 بكسل بين 320 و1200؟
clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem).
هل يكبر النص إن كبّر الزائر الصفحة؟
نعم، لأن الأحجام بوحدة rem.
هل يتساوى العرضان؟
لا.
هل يُرفع شيء؟
لا.