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

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

اندازه متن می‌تواند با 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