محوّل وحدات CSS

مرجع

وحدات CSS

CSS يوفر وحدات مطلقة ونسبية. الوحدات النسبية مثل rem و em و vw تتناسب مع مرجع.

px، rem، em، vw

px — وحدة مطلقة.

rem — نسبة لحجم خط عنصر html. الافتراضي 16px.

em — نسبة لحجم خط العنصر الأب.

vw — 1vw = 1% من عرض viewport.

تحويلات شائعة من px إلى rem

مع قاعدة المتصفح الافتراضية 16px: 12px = 0.75rem، 14px = 0.875rem، 16px = 1rem، 18px = 1.125rem، 20px = 1.25rem، 24px = 1.5rem، 32px = 2rem، 48px = 3rem. لوحدات منفذ العرض على تصميم 1440px: 14.4px = 1vw، 72px = 5vw.

لماذا يُفضل rem لإمكانية الوصول

استخدام rem لأحجام الخطوط يحترم تفضيل المستخدم لحجم خط المتصفح. عندما يضبط المستخدم متصفحه على 20px بدلاً من الافتراضي 16px، تتناسب التخطيطات القائمة على rem بشكل متناسب بينما تبقى التخطيطات القائمة على px ثابتة. يتطلب WCAG 1.4.4 (تغيير حجم النص) أن يمكن تكبير النص حتى 200% دون فقدان المحتوى أو الوظائف — وحدات rem تلبي هذا المطلب بشكل طبيعي.

الخصوصية

كل التحويل يعمل 100% في متصفحك.