انتقل إلى محتوى الدرس

Responsive Font Sizes RFS تحجيم الخطوط المتجاوب RFS

أتقن طبقة التطبيع القياسي Reboot في Bootstrap 5.3: توحيد المتصفحات، وقاعدة border-box الشاملة، وحزمة خطوط النظام، وتحجيم العناوين المتجاوب RFS، وإعدادات الإتاحة.
2 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

قد يبدو عنوان <h1> بحجم 40px متناسقاً على شاشة الحاسوب، لكنه يزدحم وينكسر في أربعة أسطر ضيقة على شاشة الهاتف الصغير. لذلك يفعّل Bootstrap 5 افتراضياً محرك تحجيم الخطوط المتجاوب RFS؛ حيث تُحسب أحجام العناوين بمعادلة calc() ذكية تجمع بين قيمة أساسية بوحدة rem ونسبة مرنة من عرض الشاشة vw لتتدرج بنعومة تامة حتى تبلغ حجمها الكامل عند عرض 1200px.

الصف 2 كود برمجي
HTML
<div class="container">
  <h1>H1 Fluid RFS Heading</h1>
  <h2>H2 Fluid Subheading</h2>
  <h3>H3 Section Heading</h3>
  <p>Paragraph stays at steady 1rem (16px) base.</p>
</div>