CSS Media Queries - Solo and Bootstrap way

media-queries.css

/* Solo Queries
*********************************************/

/* Phones (portrait and landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

/* Phones (landscape) */
@media only screen and (min-width: 321px) {}

/* Phones (portrait) */
@media only screen and (max-width: 320px) {}

/* Tablets (portrait and landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

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

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

/* Desktops and Laptops */
@media only screen and (min-width: 1224px) {}

/* Large screens */
@media only screen and (min-width: 1824px) {}

/* iPhone retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {}

/* Bootstrap Way
*********************************************/

/* Landscape phones and down */
@media (max-width: 480px) {}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {}
 
/* Large desktop */
@media (min-width: 1200px) {}