my code stock.com

Tobias Hopp

Bootstrap 3 Breakpoints
von Tobias Hopp

Mobile First and Desktop First List Breakpoints for Bootstrap 3.

Snippet-Optionen

Download: Snippet als bootstrap-3-breakpoints.css herunterladen.
Snippet kopieren: Für diese Aktion benötigst du einen kostenlosen my code stock.com Account
Embed-Code : Du findest den Embed-Code für dieses Snippet am Ende der Seite, wenn du es in eine Webseite oder einen Blog einbinden möchtest!

/*==================================================
=            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) {
        
    }
    
    /* ------------------------------------------------------------------------------- */
    /* Portrait and Landscape -------------------------------------------------------- */
    /* ------------------------------------------------------------------------------- */
    @media screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
    	body {
    		background: yellow;
    	}
    }
    /* ------------------------------------------------------------------------------- */
    /* landscape --------------------------------------------------------------------- */
    /* ------------------------------------------------------------------------------- */
    @media screen and (min-device-width : 768px) and (max-device-width : 1024px)and (orientation : landscape)  {
    	body {
    		background: orange;
    	}
    }
    /* ------------------------------------------------------------------------------- */
    /* Portrait */
    /* ------------------------------------------------------------------------------- */
    @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)  {
    	body {
    		background: blue;
    	}
    }

Jetzt kostenlosen my code stock.com Account anlegen

my code stok.com ist ein kostenloser Dienst zum Speichern und Verwalten von Code-Snippets jeglicher Art und Programmiersprache. Wir bieten dir viele Vorteile für die tägliche Arbeit mit Code-Snippets und der gemeinsamen Arbeit im Team, probier es aus!

Jetzt informieren und registrieren

Du kannst die Höhe des iFrame-Codes beliebig anpassen! Mehr Infos findest du in unserer Embed-Code API Referenz.