ওয়েব ডিজাইনে রেসপনসিভ কথাটা মানে বুঝাই আপনার ওয়েব সাইটটি সকল ডিভাইসের জন্য উপযোগী। অর্থাৎ আপনার সাইটটির ব্যবহারকারী শুধু ডেস্কটপ ব্যবহারকারী হবে তা নই বরং আপনার সাইটটি ট্যাবলেট, মোবাইল, ডেস্কটপ সকল ডিভাইসে ব্যবহার উপযোগী হয়ে উঠবে।
সাইটটি রেসপনসিভ করার জন্য প্রথমেই সাইটটির রেসপনসিভ চালু করতে হবে। তারপর সাইটের সকল ডাটা এক এক করে রেসপনসিভ করতে হবে।
রেসপনসিভ চালু করার নিয়মঃ
সাইটের head Tag এর মাঝে <meta name="viewport" content="width=device-width, initial-scale=1.0"> এই মেটা কোডটি যোগ করতে হবে।
জেমনঃ
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
এবার আপনার সাইটের index page-এ head tag এর মাঝে যেখানে মূল css যোগ করেছেন ঠিক তার নিচে রেসপনসিভ করার জন্য রেসপনসিভ css ফাইল যোগ করতে হবে। ধরলাম আমাদের সাইটে দুইটা সাধারণ css ফাইল আছে যাদের নাম style.css এবং menustyle.css আর আমাদের রেসপনসিভ করার জন্য css ফাইলটির নাম হবে responsivedev.css এখন আমাদের এই responsivedev.css কে অবশ্যই আগের দুইটা css কল করার পরে কল করতে হবে নয়তো অনেক ফাংশন কাজ করবেনা। জেমনঃ
<head>
<link rel="stylesheet" href="style.css"> <!-- প্রথম css ফাইল -->
<link rel="stylesheet" href=" menustyle.css"> <!—দ্বিতীয় css ফাইল -->
<link rel="stylesheet" href=" responsivedev.css"> <!-- রেসপনসিভ css ফাইল-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- রেসপনসিভ চালু করার নিয়ম -->
</head>
আমাদের সাইট এখন রেসপন্সিভ হওয়ার জন্য প্রস্তুত। আমি প্রথমেই রেসপনসিভ করার কোড গুলো দিয়ে দিচ্ছি তারপর ব্যাখ্যা দিচ্ছি।
কোডঃ responsivedev.css ফাইলঃ
/* Default Layout: 992px. */
#container{width:960px;height:300px;background:#DDD;color:red}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#container{width:768px;height:300px;background:navy;}
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#container{width:480px;height:300px;background:yellow;}
}
/* Mobile Layout: 320px. */
@media only screen and (min-width: 320px) and (max-width: 479px) {
#container{width:320x;height:300px;background:purple;}
}
উপরের কোডে চারটি সাইজের ডিভাইসের উপযোগী করে কোড দেওয়া আছে।
প্রথমটি ডেস্কটপের জন্য আর সেটা ডিফল্ট সাইজ। পরের কোডটি Tablet Layout এর কন্য। অর্থাৎ Tablet এ আপনার সাইটটি দেখলে কেমন দেখাবে তা এই জাইগায় css এর মাধ্যমে বলে দিতে হবে।
তারপরের টি Wide Mobile Layout: 480px. জন্য এবং শেষেরটি Mobile Layout: 320px. এর জন্য। কোড লিখার নিয়ম একই।
শুধু আপনি যে ডিভাইসের উপযোগী করতে চান তার স্ক্রিন সাইজ অনুযায়ী লিখলেই হবে।
কোড লিখার নিয়মঃ
@media only screen and (min-width: 320px) and (max-width: 479px) {
}
প্রথমে @media only screen and (min-width:আপনার ডিভাইসের মিনিমাম উইড পিক্সেলে ) and (ম্যাক্সিমাম উইড পিক্সেলে ){
দ্বিতীয় বন্ধনীর মাঝে অর্থাৎ এখানে ডিভাইসের সাইজ অনুযায়ী সকল কোড লিখতে হবে।
}
আপনি এখন জেকোন ডিভাইসের জন্য উপযোগী করে সাইট বানাতে পারবেন। শুধু যেই ডিভাইসের জন্য রেসপনসিভ করবেন তার মিনিমাম এবং ম্যাক্সিমাম স্ক্রীন সাইজ জেনে নিবেন। আইফোনের স্ক্রীন সাইজ একটাই তাই সেখানে শুধু width দিলেই হবে, মিনিমাম আর ম্যাক্সিমামের দরকার নেই।
জেমনঃ
@media only screen and (width: 300px) {
এখানে উইড একটাই তাই শুধু উইড দিলেই হবে । আর এখানে অর্থাৎ দ্বিতীয় বন্ধনীর মাঝে বাকি কোড গুলো লিখতে হবে।
}
রেসপনসিভ মেনু তৈরীর নিয়মঃ
শুধু সাইট রেসপনসিভ হলেই হবেনা। সাইটের ন্যাভিগেশন বা মেনু কেও করতে হবে রেসপনসিভ কেননা ট্যাবলেটে সাধারণ মেনু দিয়ে কাজ করা গেলেও মোবাইলের জন্য আলদা রকম মেনু করা চাই তাহলে মোবাইল থেকে ব্রাউজ করা সহজ হবে। আমি সম্পূর্ণ কোড মানে মেনু তৈরী থেকে শুরু করে সব কোড এখানে দিয়ে দিচ্ছি আশা করি HTML সবাই পাবেন তাই কোড দেখেই বুঝে নিতে পারবেন আর আমি কোডে কমেন্ট দিয়েছি তাই কমেন্ট দেখেই বুঝে নিবেন আশা করি।
সমস্যা হলে কমেন্টে জানাবেন।
===============================================================================================
index.html page এর কোডঃ
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- প্রথম css ফাইল -->
<link rel="stylesheet" href=" menustyle.css"> <!--দ্বিতীয় css ফাইল -->
<link rel="stylesheet" href=" responsivedev.css"> <!-- রেসপনসিভ css ফাইল-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- রেসপনসিভ চালু করার নিয়ম -->
</head>
<body>
<!--Navigation menu start-->
<nav>
<a id="menu-toggle" href="#">Menu</a>
<ul class="" id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Directions</a></li>
</ul>
</nav>
<!--Navigation menu end-->
<!--JQuery code for responsive navigation menu start-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
<!--JQuery code for responsive navigation menu end-->
<!--Site content area start-->
<div id="container">
<h1>This screen size is 960px</h1>
<h2>This screen size is 768px</h1>
<h3>This screen size is 480px</h1>
<h4>This screen size is 320x</h1>
</div>
<!--Site content area end-->
</body>
</html>
================================================================================================
style.css এ কোন কোড নাই ।
================================================================================================
menustyle.css page এর কোডঃ
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { background-color: #f4f4f4; }
.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
ul { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
ul li { display: inline-block; text-align: left; }
ul li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
ul li a:hover { background-color: #ccc; }
.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
#mobile-nav { display:none; }
@media (max-width:48.000em){
article { padding: 1.5em; }
nav > ul { display: none; }
.anchor-link, #mobile-nav { display: block; }
nav {
}
ul.open {
background-color: #F4F4F4;
box-shadow: 2px 2px 3px #444444;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 40px;
width: 70%;
z-index: 500;
}
ul.open li { display: block; list-style: none; text-align: center; }
ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
ul.open li a:hover { background-color: #ccc; color: #fff; }
}
==============================================================================================
এছাড়াও Twitter Bootstrap ও অন্যান্য Framework এর মাধ্যমে রেসপনসিভ ডিজাইন করা যাই। আজ এই পর্যন্তই । ভুল হলে ক্ষমা করে দিবেন।
কিছু না বুঝলে জানাবেন আমি বুঝিয়ে দেওয়ার চেষ্টা করব।
ধন্যবাদ সবাইকে।
।
অনলাইনে ছড়িয়ে ছিটিয়ে থাকা কথা গুলোকেই সহজে জানবার সুবিধার জন্য একত্রিত করে আমাদের কথা । এখানে সংগৃহিত কথা গুলোর সত্ব (copyright) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।