Skip to content

Instantly share code, notes, and snippets.

@gtchakama

gtchakama/main.css

Created August 22, 2021 07:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gtchakama/f7667dccdb9e6523345562d19965af0c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gtchakama/f7667dccdb9e6523345562d19965af0c to your computer and use it in GitHub Desktop.
Download ZIP
Typical Device Breakpoints.
Raw
main.css
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
@gtchakama

gtchakama commented Aug 22, 2021

Copy link
Copy Markdown
Author

Typical Device Breakpoints.

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups.

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