Kategorien
Allgemeines Entwickler Webdesign

Bootstrap3: Media Queries Breakpoints

Es ist ja bekannt, dass Bootstrap ein „Mobile-First-Framework“ ist. Um sich die Unendliche Suche im Web zu ersparen, hier eine kleine Auflistung Media Queries in der Mobile First und Non-Mobile-First Methode.

Mobile-First 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 MEDIA QUERIES

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

        }

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert