Bart SalléFreelance webdeveloper Plan een gesprek
CSS

Bootstrap 3 Media Queries

Bootstrap 3 Media Queries

Uiteraard terug te vinden in Bootstrap zelf maar voor het gemak even opgesomd. Bedenk echter altijd per project of je ze wel nodig hebt. Vaak heb je aan minder genoeg of kun je beter andere breakpoints gebruiken.

Aanrader is het boekje van Ethan Marcotte over Responsive Webdesign.

/*==================================================
=            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) {

    }
Vraag advies over dit onderwerp
Algemeen

Ik wil web developer worden maar welke opleiding of cursus kan ik dan het beste volgen?

25 september 2022 Lees meer
CSS

Sticky elementen zonder javascript

29 januari 2022 Lees meer
CSS

Responsive kolomvolgorde aanpassen in Bootstrap 4

15 juni 2020 Lees meer