كيفية إنشاء: نص تفاعلي

حجم الخط التفاعلي

يمكن استخدام حجم الخط vw إعداد وحدة القياس، وهو يعني "عرض النافذة الافتراضية".

بهذا، سيتبع حجم النص حجم نافذة المتصفح:

<h1 style="font-size:8vw;">مرحبًا بالعالم</h1>
<p style="font-size:2vw;">ضعف حجم نافذة المتصفح، وسيعرض حجم الخط كيفية التقليل.</p>

جربها بنفسك

ملاحظة:النافذة الافتراضية هي حجم نافذة المتصفح.1vw = 1% من عرض النافذة الافتراضية. إذا كان عرض النافذة الافتراضية 50 مترًا، 1vw بالمتر 0.5.

تغيير حجم الخط باستخدام استعلام وسائل الإعلام

يمكنك أيضًا استخدام استعلامات وسائل الإعلام لتحديد حجم الخط الخاص بعنصر معين لعرض معين:

استعرض النتائج

/* إذا كان عرض الشاشة 601px أو أكبر، قم بتعيين font-size الخاصة بـ <div> إلى 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* إذا كان عرض الشاشة 600px أو أقل، قم بتعيين font-size الخاصة بـ <div> إلى 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

جربها بنفسك

الصفحات ذات الصلة

دليل:نوع الخط CSS

دليل:استعلام وسائل الاعلام CSS