إحصاءات استخدام مجهولة

بإذنك نسجل الصفحات التي تُزار باستخدام معرّفات عشوائية لفهم كيفية استخدام الموقع. لا يُسجَّل شيء ما لم توافق. سياسة الخصوصية

أداة مجانية

محوّل وحدات CSS والخط المتجاوب

حوّل البكسل إلى rem، وابنِ سلّم خطوط، واكتب حجماً بـ clamp() يكبر بسلاسة بين عرضين للشاشة.

تعمل داخل متصفحك. ما تكتبه لا يُرسل إلى أي مكان.

حوّل

تستخدم المتصفحات ١٦ ما لم يغيّره الموقع.

px
24
rem
1.5
em
1.5

أحجام شائعة

الأحجام المعتادة بالبكسل مقابل rem، بحجم جذري 16px. اختر واحداً لتحوّله.

سلّم الخطوط

كل درجة هي التي قبلها مضروبة في نسبة. اختر حجماً أساسياً ونسبة.

  • نص تجريبي للحجم48.83px · 3.052rem
  • نص تجريبي للحجم39.06px · 2.441rem
  • نص تجريبي للحجم31.25px · 1.953rem
  • نص تجريبي للحجم25px · 1.563rem
  • نص تجريبي للحجم20px · 1.25rem
  • نص تجريبي للحجم16px · 1rem
  • نص تجريبي للحجم12.8px · 0.8rem
  • نص تجريبي للحجم10.24px · 0.64rem

حجم متجاوب بـ clamp()

اختر أصغر حجم وأكبره وعرضي الشاشة اللذين يكبر بينهما الحجم. حرّك المنزلق لتراه.

font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

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

طريقة الاستخدام

  1. 01اكتب قيمة واختر px أو rem للتحويل، مع حجمك الجذري إن لم يكن ١٦.
  2. 02اختر حجماً أساسياً ونسبة لترى سلّم خطوط بالبكسل وrem.
  3. 03اكتب أصغر حجم وأكبره وعرضي الشاشة، ثم انسخ سطر clamp().

أسئلة شائعة

لماذا أستخدم rem بدل px؟

تتناسب rem مع حجم الخط الجذري، فيكبر النص والمسافات حين يكبّر الزائر الخط في متصفحه. أما البكسل فلا يتبع هذا الإعداد.

ما الفرق بين rem وem؟

rem تتناسب دائماً مع حجم الخط الجذري. أما em فتتناسب مع حجم خط العنصر نفسه، فقد تتراكم حين تتداخل العناصر. وتتطابق الأرقام هنا فقط حين يكون للعنصر الحجم الجذري.

كيف تجعل clamp() الحجم متجاوباً؟

تستخدم clamp(الأدنى، المفضّل، الأقصى) القيمة المفضلة ولا تنزل عن الأدنى ولا تتجاوز الأقصى. والقيمة المفضلة هنا خط مستقيم بين حجميك، فتكبر بسلاسة من الأول إلى الثاني.

لماذا في القيمة الوسطى جزء rem وجزء vw؟

الخط المستقيم إزاحة بداية مع ميل. الميل هو جزء vw، والإزاحة هي جزء rem. وبقاء الإزاحة بوحدة rem يجعل الحجم يستجيب أيضاً حين يغيّر الزائر حجم النص.

هل يُرسل ما أكتبه إلى أي مكان؟

لا. تُحسب الأرقام في متصفحك.

خطوط تناسب كل شاشة

نبني أنظمة تصميم ومواقع متجاوبة تتدرج فيها الخطوط والمسافات والتخطيط بنظافة من الهاتف إلى الشاشة العريضة.

تعرّف على الحلول الرقمية

المزيد من الأدوات المجانية

كل الأدوات