نمونه کد طراحی سایت ریسپانسیو

در این مقاله مقدمه ای بر چگونگی ریسپانسیو کردن سایت خواهیم خواند.

طراحی سایت ریسپانسیو

مقدمه مطلب طراحی سایت ریسپانسیو را کمی خلاصه کرده ایم تا بیشتر به اصل مطلب بپردازیم. طراحی سایت ریسپانسیو به معنی طراحی سایت بصورت قابل مشاهده در دستگاه های مختلف بدون نیاز به اسکرول افقی است.

هر دستگاهی اندازه مشخص برای صفحه خود دارد برخی دستگاه ها میتوانند تصویر را افقی و عمودی نشان دهند و بنابراین دو اندازه برای طول و عرض میپذیرند. بنابراین اگر ما مشخصات وبسایت خود را بر روی یک مقدار مشخص طول و عرض وارد کنیم. برای آنکه صفحه ما هنگام تغییر کند نیاز به یک کد داریم. این کد بصورت زیر میباشد.

این کد در قسمت هد کد سایت قرار میگیرید.

در قسمت content ما عرض سایت سایت را مشخص می کنیم. و در قسمت initial-scale زوم صفحه را در زمان لود شدن نشان میدهد.

نبودن این کد باعث میشود که سایت ما ریسپانسیو نباشد.

برای ریسپانسیو کردن سایت ما اغلب از استایل Float استفاده می کنیم در آموزش صفحه بندی با CSS توسط float and clear نحوه استفاده از این استایل بصورت کلی ارائه شده است . در ادامه ما این استایل را برای ریسپانسیو کردن بکار خواهیم برد.

نکته برای اینکه یک سایت ریسپانسیو باشد نمی توانید از عناصر تصویری بزرگ استفاده کنید . مگر انکه با کد تصویر کوچکتری را در دستگاه های کوچکتر جایگزین کنید.

هر صفحه در هر ابعادی به 12 بخش تقسیم میشود و شما میتوانید برای این دوازده بخش برنامه نویسی کنید چه خودتان اینکار را انجام بدهید و چه از بوت استرپ استفاده کنید فرقی نمی کند این 12 بخش همواره ثابت هستند.

برای اینکه المان های ما در این دوازده بخش درست قرار بگیرند ما باید ابعاد دقیق آنها را بدانیم بعنوان مثال من یک تگ با ابعاد 5 پیکسل ایجاد کرده ایم و سپس به آن یک مقدار margin و یک مقدار padding هر کدام به ابعاد 7 پیکسل داده ایم . اندازه این المان در عرض چند پیکسل است . این المان در عرض به اندازه 5+7+7+7+7 پیکسل عرض خواهد داشت چرا که padding و margin در عرض هم از چپ و هم از راست به المان عرض میدهند.

برای حل این مشکل از کد زیر استفاده کنید تا عرض هر المان برابر با عددی باشد که به آن میدهید.

* {
box-sizing: border-box;
}

حالا ما میخواهیم یک سایت با یک منو و یک محتوا ایجاد کنیم . ما منو را 25 % و محتوا را 75 % از صفحه قرار داده ایم بنابراین ما از کد های زیر استفاده می کنیم:

.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

مشاهده کد

اگر 12 ستون در صفحه 100% صفحه را اشغال می کند هر ستون چند درصد صفحه را اشغال خواهد کرد؟ با یک تقسیم به عدد 8.33 % میرسیم.برای اینکه بتوانید در استایل صفحه به این دوازده ستون استایل بدهیم از کلاس class="col-" استفاده کرده ایم :

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

مشاهده کد

حالا اگر بخواهیم به همه این ستون ها استایل بدهیم مثلا همه را Float:left و به همه Margin بدهیم از این کد می توانیم استفاده کنیم:

[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}

حالا در هر المان <div> که عرض صفحه را فرا میگیرد باید در مجموع 12 ستون داشته باشیم :

حالا اگر ستون های که در یک سطر قرار میگیرند از ارتفاع سطر بزرگتر باشند باعث به هم ریختن کل چیدمان صفحه می شود.

.row::after {
content: "";
clear: both;
display: table;
}

حالا به کد های خود کمی رنگ و استایل می دهیم تا زیباتر شود:

html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}