چگونه ایجاد می‌شود: متن پاسخگو

اندازه فونت پاسخگو

اندازه متن می‌تواند با vw تنظیم واحد، که به معنای "عرض视‌کننده" است.

بنابراین، اندازه متن از اندازه پنجره مرورگر پیروی می‌کند:

<h1 style="font-size:8vw;">Hello World</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 جستجوهای رسانه‌ای