من کلا Twitter Bootstrap رو دوست دارم!وقتی با استفاده از اون توسعه می دادم به این موضوع رسیدم . ولی معمولا همیشه نیاز داشتم که استایل های خودم رو در سایزهای مختلف موبایل تبلت و مانیتور اعمال کنم .

همونطور که احتمالا می دونید این کار بوسیله Media Query ها در CSS انجام میشه و اصطلاحا سایت رو ریسپانسیو یا واکنش گرا می کنیم. البته خود بوت استرپ هم از این روش استفاده می کنه . در این مطلب می خواهیم کدهای Media Query هر دو نسخه  بوت استرپ یعنیBootstrap 2 (2.3.2) وBootstrap 3 رو برای شما قرار بدیم تا در پروژه های آینده تون راحت تر کار ریسپانیو کردن رو انجام بدید.

نقاط شکست (Breakpoints) در Bootstrap 3

Bootstrap3 یک فریم ورک فرونت اند و موبایل فرست (Mobile First) است. من در زیر ترتیب درست قرارگیری مدیاکوئری ها را برای متدولوژی موبایل فرست رعایت کردم به علاوه در زیر آن به صورت معمولی نیز آنها را قرار دادم که از نظر تکنیکی فرقی با هم ندارند .

Min-Width : به هر مقداری که بزرگتر یا مساوی مقدار داده شده باشد اشاره می کند.در اینجا منظور از مقدار عرض صفحه است . یعنی اگر حداقل عرض صفحه بزرگتر یا مساوی این بود …

Max-Width : به هر مقداری که کوچکتر یا مساوی مقدار داده شده باشد اشاره می کند.یعنی اگر حداکثر عذض صفحه کوچکتر یا مساوی این بود …

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }

نقاط شکست (BREAKPOINTS) در BOOTSTRAP 2.3.2

/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

منظور Mobile First که در بالا به آن اشاره شد یک نوع متد طراحی سایت است که در آن ابتدا سایت را برای موبایل طراحی می کنند و سپس به سمت نمایشگرهای بزرگتر می روند . چون طرح سایت برای موبایل ساده تر است پس کدهای کمتری از مانیتورهای سایز بزرگ می طلبد .مزیت این کار اینست که حجم کدهای کم می شود و از کدهای تکراری اجتناب می گردد و طراحی مقداری سریعتر انجام می شود.اطلاعات بیشتر در اینجا و اینجا

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

منبع