محول وحدات CSS (px / rem / em / vh / vw)

لماذا rem بدلًا من px

تبدأ المتصفحات عند 16px، لكن الأشخاص ضعاف البصر غالبًا ما يرفعون حجم الخط الافتراضي في إعدادات المتصفح. يكبر النص المحدد بوحدة rem مع هذا الإعداد، بينما لا يكبر النص المحدد بوحدة px. يؤدي تكبير الصفحة إلى تكبير كليهما، لكن إعداد حجم الخط هو ما يعتمد عليه كثير من القراء، كما يتطلب معيار WCAG الخاص بتغيير حجم النص أن يتدرج النص إلى 200% دون فقدان. حدّد حجم النص والمسافات المحيطة به بوحدة rem، واحتفظ بـ px للخطوط الدقيقة والحدود.

عمود em والتداخل

وحدة em نسبية إلى حجم خط العنصر نفسه، أما في font-size تحديدًا فتعني حجم خط العنصر الأب. تفترض قيم em هنا أن العنصر الأب بالحجم الأساسي للجذر، وهذا لا يصح إلا في المستوى الأعلى. داخل عنصر حجمه 0.875em، تعطي 0.875em مرة أخرى 12.25px بدلًا من 14px، ويتراكم التصغير. لذلك تُعد rem الخيار الافتراضي الأكثر أمانًا، بينما تناسب em المسافات التي ينبغي أن تتدرج مع نص المكوّن.

الحجم الأساسي 62.5% ووحدات مساحة العرض

يؤدي ضبط html { font-size: 62.5% } إلى جعل 1rem مساويًا لـ 10px، ما يسهّل الحساب؛ أدخل 10 كحجم أساسي للحصول على النتيجة نفسها. لكنه يصغّر كل ما عدا ذلك والمقاس بوحدة rem، بما في ذلك المكوّنات التابعة لجهات خارجية، لذا اضبط حجمًا مقروءًا على body مرة أخرى.

تفترض قيمتا vw وvh مساحة عرض بحجم 1440 × 900. على الهواتف، قد تكون 100vh أطول من المساحة المرئية أثناء ظهور شريط أدوات المتصفح؛ أما 100svh و100dvh فهما الوحدتان اللتان تأخذان ذلك في الحسبان.

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

1. أدخل قيمة بالبكسل (px) وحجم أساس الجذر، والقيمة الافتراضية 16px.
2. اطّلع على قيم rem وem وvw وvh المحسوبة.
3. انسخ مقتطفات CSS الجاهزة للاستخدام أو راجع جدول المقاييس.

الخصوصية والقيود

يعمل فورًا باستخدام JavaScript من جهة العميل.