আসসালামু আলাইকুম। কেমন আছেন প্রিয় টেকটিউনস এর বন্ধুরা। আলহামদুলিল্লাহ আমিও ভালো আছি। ওবে ডিজাইন এর বাংলা সিরিজ টিউটোরিয়ালের আজকের 17 তম পর্বের দ্বিতীয় খন্ডে আমি আপনাদেরকে স্বাগত জানাচ্চি ইন্জিনিয়ার মোঃ মারুফ সিদ্দিকী। আজ আমরা আলোচনা করবো HTML 5 এর Responsive Text Size নিয়ে।
আমরা যখন কোন সাইটে কোন টেক্সট এড করে থাকি তখন আমরা যদি text গুলোকে responsive না করে দেই তাহলে তা সাইট এর মূল ডিজাইনকে ভেঙে ফেলবে। নিচের কোডগুলো খেয়াল করুন এখানে কিভাবে VW অর্থ্যাৎ Viewport Width এর মাধ্যমে টেক্সট কে Responsive করা হয়েছে তা দেখতে পাবেন।
<!DOCTYPE html>
<html>
<head>
<title>Engineer Maruf</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.00″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<h1 style=”font-size: 10vw”>Responsive Text</h1>
<p style=”font-size: 5vw”>THis article is made my Engineer Md Maruf Siddique</p>
</body>
</html>
আমরা চাইলে এই কাজটি অর্থ্যাৎ Responsive Text কে Media queries এর মাধ্যমেও করতে পারি। নিচের কোডটি টাইপ করুন। আমি এখানে সকল কোড দিয়ে দিয়েছি এই মনে করে যাতে করে আপনারা কোথাও কোন ধরনের সম্যস্যা দেখলে তা থেকে উত্তরন পেতে পারেন। তবে আপনাদের কাছে অনুরোধ থাকবে যদি কাজ শিখতে চান তাহলে অবশ্যই কোডগুলো নিজ হাতে টাইপ করুন।
<head>
<title>Engineer Maruf</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.00″>
</head>
<body>
<h2>Media Queries</h2>
<p>Resize the browser window</p>
<div class=”left”>
<p>left menu</p>
</div>
<div class=”main”>
<p>Main content</p>
</div>
<div class=”right”>
<p>Right content</p>
</div>
</body>
</html>
এবারে নিচের CSS টিকে আপনার CSS ফাইলে গিয়ে টাইপ করুন।
*{
box-sizing: border-box;
}
.left{
background-color: #2196f3;
padding: 20px;
float: left;
width: 20%;
}
.main{
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 60%;
}
.right{
background-color: #4CAF50;
padding: 20px;
float: left;
width: 20%;
}
@media screen and (max-width: 800px){
.left .main .right{
width: 100%;
}
}
আর্টিকেলটির সাথে সংযুক্ত ভিডিওটি ভালোভাবে দেখুন। আমি এই আর্টিকেলটির বিস্তারিত নিচের ভিডিওটিতে practically দেখিয়েছি। যারা লেখাটি পরে পরির্পর্ণভাবে বুঝতে পারেননি, তারা নিচের ভিডিওটি দেখে নিবেন। তার পরও কোন প্রশ্ন থাকলে আমাকে কমেন্ট করে জানাবেন।
 এইসটিএমএল৫ পর্ব–১৭-২){kind=link}