কিভাবে তৈরি করা: রেসপনসিভ লেখা

রেসপনসিভ ফন্ট আকার

লেখার আকারকে 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;
  }
}

亲自试一试

相关页面

教程：সিএসএস ফন্ট

教程：সিএসএস মিডিয়া কোর্স