Skip to content

Instantly share code, notes, and snippets.

@shelooks16
Created June 21, 2018 22:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shelooks16/2fe1b1d604be1353585818cb08a8fdc2 to your computer and use it in GitHub Desktop.
Save shelooks16/2fe1b1d604be1353585818cb08a8fdc2 to your computer and use it in GitHub Desktop.
breakponts all types for media queries
/* smartphones, iPhone, portrait 480x320 phones */
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
/* tablet, landscape iPad, lo-res laptops ands desktops */
/* big landscape tablets, laptops, and desktops */
/* hi-res laptops and desktops */
@media (min-width:320px) {}
@media (min-width:481px) {}
@media (min-width:641px) {}
@media (min-width:961px) {}
@media (min-width:1025px) {}
@media (min-width:1281px) {}
----------------------main----------------------------------------------
@media only screen and (max-width: 576px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 992px) {}
@media only screen and (max-width: 1200px) {}
----------------bootstrap breakpoints[width]------------------------------
.col- < 576px Extra small
.col-sm >= 576px Small
.col-md- >= 768px Medium
.col-lg >= 992px Large
.col-xl >- 1200px Extra Large
------------------------------------------------------------------------------
/* The Standard Breakpoints. Working with fluid images. */
@media all and (max-width: 1690px) {}
@media all and (max-width: 1280px) {}
@media all and (max-width: 980px) {}
@media all and (max-width: 736px) {}
@media all and (max-width: 480px) {}
/* The Standard Breakpoints. But possibly this is a slightly complicated situation. */
@media all and (min-width:1200px) {}
@media all and (min-width: 960px) and (max-width: 1199px) {}
@media all and (min-width: 768px) and (max-width: 959px) {}
@media all and (min-width: 480px) and (max-width: 767px) {}
@media all and (max-width: 599px) {}
@media all and (max-width: 479px) {}
------------------------------------------------------------------------------
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment