Tuesday, 22 April 2014

Default Sizes for Twitter Bootstrap’s Media Queries

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

 }


/* iPad landscape · width: 1024px */
@media only screen and (max-width : 1024px) {

 }


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

 }


/*Landscape*/
@media only screen and (max-width : 960px) {
}


/* Kindel Fire HD 8.9in (800x1280) Tablets */
@media only screen and (max-width : 800px) {
}



/* iPad (All) (768x1024) Portrait Tablets */
@media only screen and (max-width : 768px) {
}

/* Google Nexus 7 603x966 | Samsung Galaxy Tab 600x1024  */
@media only screen and (max-width : 603px) {
}
/*iPhone 6 landscape · width: 667px */
@media only screen and (max-width : 667px) {

}


/*iPhone4 and iPhone5 Galaxy S2 and S3  */
@media only screen and (max-width : 640px) {

}






/* iPhone 5 Landscape · 320x568px */
@media only screen and (max-width : 568px) {

}
/* Kindel Fire HD 8.9in (533x853) Tablets */
@media only screen and (max-width : 533px) {
}

/*iPhone3 Landscape*/ @media only screen and (max-width : 480px) {

}


/* iPhone 6 PLUS (414x736) */
@media only screen and (max-width : 414px) {

}

/* iPhone 6 portrait (375x667) */
@media only screen and (max-width : 375px ) {

}

/* Galaxy S5 (360x640) */
@media only screen and (max-width : 360px) {


}
/* iPhone 3/4 Blackberry8300 / LG/ AUSUS / S3 S4 */
@media only screen and (max-width : 320px) {


}





/*Galaxy Y*/
@media only screen and (max-width : 240px) {


}







I love Twitter’s Bootstrap. I find that when developing with it, either Bootstrap 2 (2.3.2) or Bootstrap 3, that I always need to apply custom styles at the different sizes. Especially when going beyond Bootstrap’s standard functionality. After all, it’s just a front-end framework.
Below you’ll find nicely formatted Media Queries for starting with either of the Bootstrap versions. You can use this as a starting point for your projects. It’s basically what I use when creating a new website or webapp. I’ve also provided links to Github for quick access.

Bootstrap 3 Media Query Breakpoints

Bootstrap 3 is a mobile-first front-end framework. I’ve included the correct order for the Media Queries below, but I’ve also included at the bottom of them the non-mobile first breakpoints in case some people aren’t used to the mobile-first methodology since technically both will work.
Min-Width: Refers to everything greater than or equal to the amount given.

Max-Width: Refers to everything less than or equal to the amount given.

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

Bootstrap 2.3.2 Media Query Breakpoints


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

}

Improvements

If you have improvements, corrections, or just a different way, I would love to hear it. I’ll gladly update this if anyone has better or more accurate information. Either post a comment or send me a Pull Request on GitHub.
Related Reading For some more information on using the Bootstrap Grid, check out our other article: Understanding the Bootstrap 3 Grid System.

No comments:

Post a Comment

Alternative content