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

در روش Media سایت به صورت پیش فرض برای رزولوشن موبایل طراحی می گردد و سپس با دستور media برای دیگر Device ها تغییراتی لحاظ می گردد. با این کار حداقل کد جهت Responsive نمودن سایت نوشته خواهد شد.
با استفاده از دستور media در CSS برای اندازه حداقل 768 و حداکثر 1024 پیکسل، div های content در کنار هم قرار می گیرند. (float می گیرند) و sidebar همچنان در پایین قرار می گیرد.

@media screen and (min-width:768px) {
#content div {
float: left;
width: 33.3333%;
}
aside {
clear: both;
}
}

برای اندازه حداقل 1024 پیکسل به بالا دو بخش float:left گرفته و در یک سطر قرار می گیرند.

@media screen and (min-width:1024px) {
body{
font-size:0.8em;
}
#content {
width: 70%;
}
aside {
width: 30%;
clear:none;
}
#content, aside {
float: left;
padding:15px;
}
}

فریم ورک متن باز بوت استرپ با تمامی مرورگرها سازگار است. این فریم ورک براساس Grid12 نوشته شده و با استفاده از کلاس های پیش فرض خود سایت را Responsive می نماید.

پوشه های js, CSS و Font بوت استرپ را در پوشه سایت خود قرار دهید.
فایل های bootstrap.min.css و bootstrap.min.js و.. را در سند Html خود لینک نمایید.
دستور زیر را درتگ head اضافه نمایید.

    <meta name="viewport" content="width=device-width, initial-scale=1" />
   

بخش های مختلف سایت رادر div هایی با کلاس های container و container-fluid و Row مشابه کدهای زیر قرار دهید. این کلاس ها به صورت پیش فرض در بوت استرپ تعریف شده اند.
برای مشخص کردن نحوه نمایش و Layout در Device های مختلف از کلاس های col استفاده می نماییم.

    

    <div class="container">
    <div class="row">
    <div class="col-*-*"></div>
    </div>
    <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    </div>
    <div class="row">
    ...
    </div>
    </div>
    
   

در این روش می توانید برای Device های مختلف استایل های CSS جداگانه نوشته و با کد jquery زیر متناسب با device فایل style مربوطه را فراخوانی نمایید.

   function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if (width < 900) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});