Last updated on March 12, 2020
I write this post to give you minimally required media queries for making your web application as responsive.
As part of building web applications, first thing we target how to diverse our applications to various devices.
Author Josh Brewer says, we have 99 view ports available.
Out of those 99 view ports, here will cover basic setup that help you to get started.
Larger Device,
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
}Laptop,
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}Portrait Tablet,
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}Landscape Tablet,
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}Landscape Smartphone,
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}Portrait Smartphone,
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS
}Those are the media queries that I use in my projects.