مـقـدمـة هناك عدة وحدات قياس عندما يتعلق الأمر بتحديد حجم خط صفحة الويب في CSS. سنتحدث على وجه الخصوص على px و em و rem. الـبـكـسـل هو وحدة قياس مطلقة (مثل pt أو cm) مما يعني أن قيمة 1 بكسل تقابل 1 بكسل من الشاشة. ميزة البكسل هي أنه غير متغير ويمكننا استخدامه بسهولة لتحديد حجم خطوطنا المختلفة. ولكن ماذا يحدث إذا أردت تكبير أو تصغير حجم النصوص الخاصة بي، بما أنها وحدة قياس مطلقة ؟.مع البكسل ، من المستحيل أن نلتزم بإعادة تعريف جميع القيم يدويًا. لهذا السبب يأتي % و em. هاتان الوحدتان هما وحدات نسبية تجعل من الممكن تحديد حجم الخط مقارنة بحجم الخط الأصل (القيمة الأساسية). إذا حددنا حجم الخط للـ body مثلا 16px ،فسيكون حجم 2em يساوي 32px. من هنا يمكننا استخدام وحدة القياس هذه لتغيير حجم عناصرنا تلقائيًا بناءً على حجم الخط. كود PHP: element { display:block; height:2em; line-height:2em; /* 2em => 2*16 = 32px */}element.big{ font-size: 32px; } /* يتم مضاعفة حجم الخط تلقائيا */li { font-size:1.2em; } /* حجم الخط 1.2 ضعف حجم الخط*/li > li { font-size:calc(1.2em * 1.2); } /* 1.2 * 1.2 => 1.44 */ بما أن وحدة em تنتسب دائما للـ parent يكفي تعديل حجم خط الأصل لرؤية تغيير حجم العنصر (في بعض الأحيان لا تنتظر نتيجة). ملاحظة: الدالة ()calc تقوم بعملية حسابية فقط. الـ rem هو وحدة تعمل مثل em ولكنها تحل مشكلة الوراثة السابقة (inheritance rem = root em). هو وحدة قياس لا يعتمد على العنصر الأصل للحصول على حجمه ولكن على عنصر الجذر (root element). لذا فإن 1rem ستأخذ قيمته من حجم خط المستند الخاص بك (body النص الأساسي أو html)، مما يسمح بالحصول على قيمة أكثر قابلية للتنبؤ بها من em. لسوء الحظ ، لا يتم دعم rem من قبل IE8 و Opera mini. لذلك وجب ذكر وحدة الـ px أو em كاحتياط. كود PHP: /* 1rem => 1*16 = 16px *//* 1rem => 100% *//* 1rem => 12pt */ كود PHP: body { font-size: 1rem;}element { display:block; height:3rem; line-height:1.2rem;} مــتــابــعــة طــيــبــة
