کیا بنا سکتا ہے: ریسپانسیو متن

ریسپانسیو فونٹ سائز

متن کی سائز کو vw یونٹ سٹیپ، اس کا مطلب ہے ‘وِجی عرض’.

اسی طرح، متن کی سائز بروزر کی جگہ کی سائز کے ساتھ تبدیل ہوتی ہے:

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">براوزر کا جگہ کو تبدیل کریں، دیکھیجئے کس طرح فونٹ سائز کو سائز بدل دیا جارہا ہے。</p>

亲自试一试

نوٹ:وِجی بروسر کا جگہ ہوتی ہے.1vw = وجی کی عرض کا 1% اگر وجی عرض 50 سینٹی میٹر ہو، تو 1vw 0.5 سینٹی میٹر کے لئے.

ویجی کوائرس کے ذریعے فونٹ سائز بدلنا

آپ کماں بھی ویجی کوائرس کے ذریعے مقررہ اسکرین سائز پر عناصر کی فونٹ سائز بدل سکتے ہیں:

معائنہ کریں

/* اگر اسکرین عرض 601px یا زیادہ ہو، <div> کا font-size 80px رکھیجئے */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* اگر اسکرین عرض 600px یا کمتر ہو، <div> کا font-size 30px رکھیجئے */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

亲自试一试

相关页面

教程：CSS 字体

教程：CSS 媒体查询