rkuhl
10/29/2014 - 5:56 AM

CSS: media queries (bootstrap + mobile devices from stephen.io)

CSS: media queries (bootstrap + mobile devices from stephen.io)

// # < 1200 #
@media (max-width: 1199px) {

}
// # < 992 #
@media (max-width: 991px) {

}
// # < 768 #
@media (max-width: 767px) {

}
// # < 480 #
@media (max-width: 479px) {

}

// # iPad in portrait & landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 	
}

// # iPad in landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
}

// # iPad in portrait #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
}

// # Retina iPad in portrait & landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
}

// # Retina iPad in landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
}

// # Retina iPad in portrait #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
}

// # iPad MINI in portrait & landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  { 
}

// # iPad MINI in landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  { 
}

// # iPad MINI in portrait #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {  
}

// # Smarphone in portrait & landscape #
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
}

// # Smarphone in landscape #
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
}

// # Smarphone in portrait #
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
}