Skip to content

Instantly share code, notes, and snippets.

@yeungon
Forked from gokulkrishh/media-query.css
Created January 1, 2020 17:12
Show Gist options
  • Save yeungon/2c634ebf1b6a5bf90fb92f99a859a2f1 to your computer and use it in GitHub Desktop.
Save yeungon/2c634ebf1b6a5bf90fb92f99a859a2f1 to your computer and use it in GitHub Desktop.
CSS Media Queries for Desktop, Tablet, Mobile.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS
}
@yeungon
Copy link
Author

yeungon commented Apr 10, 2020

Common Breakpoints: Is there a Standard Resolution?
One of the most commonly asked questions is “Which breakpoint should I use?”. There are a ton of devices on the market so we can’t and we shouldn’t define fixed breakpoints for each of them.

That’s why we can’t say that there is a standard resolution for devices, but there are some commonly used breakpoints in daily programming. If you’re using a CSS framework (like Bootstrap, Bulma, etc.) you can also use their breakpoints.

Now let’s see some common breakpoints for widths of devices:

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV
As I said above, these breakpoints can differ and there is no standard exactly defined, but these are some commonly used ones.

https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/?fbclid=IwAR2KIXwbbTvjTSKMCZ_zvCY3o-pvmK-5Pvmn0kPi9tcfIcR8FxqJgIUbUKk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment