حوّل px إلى rem وem وpt وبيكا وبوصات وmm باستخدام حجم خط العنصر الجذري وحجم خط العنصر الأب وقيمة DPI. يحدد CSS العلاقة 1 in = 96 px = 72 pt.
بقلم Adminصيغت المسودة بأدوات كتابة تعمل بالذكاء الاصطناعيآخر تحديث أمثلة تم التحقق منها: 7
24px تساوي 1.5rem مع خط جذر حجمه 16 px و96 بكسل في البوصة.
| الوحدة | القيمة | التعريف |
|---|---|---|
| بكسلات (px) | 24px | 1 px |
| نقاط طباعية (pt) | 18pt | 1 pt = 1/72 in |
| بيكا (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| بوصة (in) | 0.25in | 1 in = DPI px |
| سنتيمتر (cm) | 0.635cm | 1 cm = 1/2.54 in |
| مليمتر (mm) | 6.35mm | 1 mm = 1/25.4 in |
| أرباع المليمتر (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (حجم خط العنصر الأب) | 1.5em | 1 em = parent font size |
| rem (حجم خط العنصر الجذر) | 1.5rem | 1 rem = root font size |
| نسبة مئوية من حجم خط العنصر الأب (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
تحول CSS الأطوال عبر البكسلات. نسب الوحدات المطلقة ثابتة: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc؛ و1 Q ربع مليمتر. تعتمد الوحدات النسبية للخط على الصفحة: 1 rem حجم خط الجذر؛ وعند تعيين font-size، فإن 1 em أو 100% حجم خط العنصر الأب. يحول المحول إلى بكسلات ثم يقسم على عدد بكسلات وحدة الهدف.
يستخدمه مطورو الواجهات لتحويل أحجام التصميم من البكسل إلى rem، كي يتبع النص تفضيل القارئ إذا كان حجم خط الجذر يحترم ذلك التفضيل: مع الجذر الافتراضي 16 px، يكون 24 px مساويًا لـ 1.5 rem. ويستخدم مصممو الطباعة حقل الدقة؛ فعند 300 DPI يحتاج شعار بطول 10 mm إلى نحو 118 بكسل.
على الشاشة، لا تطابق بوصة CSS بالضرورة بوصة مقاسة. تحدد CSS النسبة عند 96 px لكل بوصة، وبكسلها المرجعي يقابل زاوية رؤية نحو 0.0213°. تعتمد مطابقة المسطرة على وسيط العرض وإعدادات الطباعة المناسبة.
في الصيغة، xₛ وxₜ قيمتا المصدر والهدف؛ وpₛ وpₜ عدد البكسلات لكل وحدة مصدر وهدف. تعتمد هذه العوامل على أحجام الخط وكثافة البكسلات التي تدخلها.
أدخل القيمة والوحدتين وحجم خط الجذر وحجم خط العنصر الأب. تستخدم عوامل البكسل لكل وحدة في x_target = x_source × p_source / p_target. تعتمد rem على الجذر؛ ويستخدم نموذج em والنسبة المئوية هنا الأب في سياق حجم الخط.
root = 16 px; 24 px = 1.5 rem، لكن root = 20 px; 24 px = 1.2 rem. علاقة الوحدات المطلقة في بكسلات CSS هي 1 in = 96 CSS px = 72 pt. ويسمح حقل الكثافة بعد البكسلات الفيزيائية أيضًا، مثل 10 mm × 300/25.4 px/mm ≈ 118.110236 px.
تُقرب الكسور الطويلة، ويحتفظ كل صف بسياق الخط والكثافة المذكورين.
| القيمة | الوحدة الأصلية | الوحدة المطلوبة | السياق | القيمة المحولة |
|---|---|---|---|---|
24 | px | rem | حجم الجذر 16 px | 1.5 |
24 | px | rem | حجم الجذر 20 px | 1.2 |
12 | pt | px | 96 px/in | 16 |
1 | pc | pt | 96 px/in | 12 |
100 | % | em | حجم الأب 16 px | 1 |
10 | mm | px | 300 px/in | 118.110236 |
CSS المستخدمةتنطبق 100% = 1 em (font-size context) على سياق حجم الخط الممثل هنا. في خصائص أخرى قد يرتبط em أو المقدار النسبي بسياق مختلف. لا تقرأ الأداة ورقة الأنماط أو أبعاد صندوق العنصر.
تغيير كثافة البكسلات الفيزيائية لا يغير تعريف البكسل في CSS. وليس مضمونًا أن تقيس البوصة على الشاشة بوصة فعلية بالمسطرة. تحقق في المتصفح والطباعة؛ ويعالج محول الطول الطول الفيزيائي المنفصل عن سياق الخط.
مصدر التحقق: التحقق وفق CSS Values 3 §6.1: 1rem = حجم خط الجذر (القيمة الافتراضية الشائعة للمتصفح 16 px)؛ 24 / 16 = 1.5.
مصدر التحقق: التحقق وفق CSS Values 3 §6.2: 1pt = 1/72 in، و1in = 96px؛ 12 × 96/72 = 16.
مصدر التحقق: التحقق وفق CSS Values 3 §6.2: 1in = 96px.
مصدر التحقق: التحقق: 1 rem = حجم خط الجذر (16 px)؛ 1.5 × 16.
16 بكسلًا في الإعداد الافتراضي الشائع. يساوي rem حجم خط عنصر html الجذر؛ والقيمة الشائعة في المتصفح 16 px، ما لم يغيرها القارئ أو تحدد ورقة الأنماط html { font-size }. مع بقاء إعداد البداية هذا، يعطي html { font-size: 62.5% } العلاقة 1 rem = 10 px. تعرف مواصفة W3C CSS Values and Units وحدة rem؛ أما 16 px فإعداد شائع للمتصفح وليس شرطًا في المواصفة.
اضرب البكسل في 0.75؛ ومن النقاط إلى البكسل اضرب في 4/3 (نحو 1.333). كلاهما يتبع قاعدة W3C CSS: 1 in = 96 px = 72 pt، لذا 1 px = 72/96 pt. متن بحجم 16 px يعادل 12 pt، ونص معالج الكلمات 11 pt نحو 14.67 px.
يرجع rem دائمًا إلى حجم خط الجذر؛ وem إلى العنصر الحالي، أو الأب عند استخدامه في font-size. لذلك تتضاعف em المتداخلة: قائمة 1.2em داخل قائمة 1.2em تعطي نصًا بحجم 1.44 من القاعدة الأصلية المشتركة. بينما يبقى 1.2rem عند 19.2 px مع جذر 16 px مهما كان عمق التداخل.
استخدم rem ليتبع النص تفضيل حجم الخط لدى القارئ، ودع خط الجذر يحترم ذلك التفضيل. يكبر تكبير الصفحة px وrem معًا؛ ويمكن لـ rem وem والنسب المئوية اتباع تفضيل الخط عبر سياق الجذر أو الأب. يتطلب معيار WCAG 2.1 رقم 1.4.4 (المستوى AA) تكبير النص إلى 200% بلا فقد محتوى أو وظيفة. قد يحقق تكبير المتصفح ذلك مع px؛ وrem قد يحترم تفضيل الخط أيضًا إذا سمح الجذر.
ليس لازمًا أن يطابق إنش CSS إنشًا مقاسًا على الشاشة. يعرّف CSS 1 in بأنه 96 px بالضبط؛ وبكسل W3C المرجعي بكسل شاشة 96 DPI يُرى من 28 in، بزاوية نحو 0.0213°. يختلف الجهاز وبعد النظر، لذا قد يقل صندوق 96 px على الهاتف عن إنش فعلي. في طباعة بالحجم الفعلي قد تطابق العلاقة 1 in = 25.4 mm المسطرة؛ ويؤثر تحجيم الطباعة ومعايرتها أيضًا.
تتضمن هذه الحاسبة أمثلة محلولة بإجابات من مصادر مستقلة، وعددها 7. تُشغّل ضمن مجموعة الاختبارات، ويمكنك تشغيلها هنا أيضًا.