شرح صفوف ومحتوى الفقرة
لاختيار الوحدة الأنسب دون حيرة في مشاريعك العملية، اعتمد هذا الدليل الهندسي المختصر وتأكد دائماً من الناتج النهائي داخل المتصفح:
| الهدف التنسيقي | الوحدة الموصى بها | السبب الهندسي والعملي |
|---|---|---|
| أحجام خطوط العناوين والفقرات | rem | تحترم إعدادات خط المستخدم وتتجنب تراكم التداخل |
| عرض أسطر المقالات القرائية | ch (45ch–65ch) | تحفظ طول سطر مريح للعين في العربية والإنجليزية |
| عرض الصناديق المرنة داخل أب | % | تتناسب طردياً مع عرض الحاوية الأم المباشرة |
| أغلفة الشاشة الكاملة بالجوال | svh أو dvh | تمنع اقتصاص المحتوى خلف شريط عنوان الهاتف |
| القياسات الثابتة الدقيقة | px | ضبط مرجعي دقيق مستقل عن أبعاد الأب |
| مخرجات الطباعة الورقية | cm و mm و pt | تطابق مقاييس الورق الفيزيائية القياسية |
ومهما كانت الوحدة النسبية التي كتبتها في الكود، افتح تبويب Computed في أدوات المطور لترى كيف حوّل المتصفح كل rem أو % أو vw إلى قيمتها النهائية المحسوبة بدقة بوحدة px!
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
اختتمت بهذا الدرس فصل بنية اللغة بإتقان الوحدات المطلقة (px ووحدات الطباعة)، والفرق الجوهري بين ثبات rem وتراكم em، وضبط السطر القرائي بـ ch، وحساب % من الأب، ووحدات العرض الحديثة للجوال svh و dvh. وفي الخطوة التالية ستبدأ فصل تنسيق النصوص مع درس ألوان النصوص في لغة CSS.