Bootstrap Media Query Breakpoints versions wise
Bootstrap Media Query Breakpoints versions wise
Bootstrap 3 Media Queries
/* Small devices - Tablets (>768px) */
@media (min-width: 768px)
@media screen and (min-width: 768px)
@media (min-width: 768px) and (max-width: 991px)
/* Medium devices - Desktops (>992px) */
@media (min-width: 992px)
/* Large devices - Desktops (>1200px) */
@media (min-width: 1200px)
Bootstrap 2 media queries
/* 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) { ... }
Foundation 5 new
/* Styles for screens that are at least 768px; */
@media only screen and (min-width: 48em) { ... }
/* Medium Displays: 768px - 1279px */
@media only screen and (min-width: 48em) { ... }
/* Large Displays: 1280px - 1440px */
@media only screen and (min-width: 80em) { ... }
/* X-Large Displays: 1400px and up */
@media only screen and (min-width: 90em) { ... }
/* Orientation: landscape */
@media screen and (orientation: landscape) { ... }
/* Orientation: portrait */
@media screen and (orientation: portrait) { ... }
/* Foundation Block Grids for above small breakpoint */
@media only screen and (min-width: 48em) { ... }
/* Top bar */
@media only screen and (min-width: 58.75em) { ... }
Foundation v4
/* Styles for screens that are at least 768px; */
@media only screen and (min-width: 48em) { ... }
/* Medium Displays: 768px - 1279px */
@media only screen and (min-width: 48em) { ... }
/* Large Displays: 1280px - 1440px */
@media only screen and (min-width: 80em) { ... }
/* X-Large Displays: 1400px and up */
@media only screen and (min-width: 90em) { ... }
/* Orientation: landscape */
@media screen and (orientation: landscape) { ... }
/* Orientation: portrait */
@media screen and (orientation: portrait) { ... }
/* Foundation Block Grids for above small breakpoint */
@media only screen and (min-width: 48em) { ... }
/* Top bar */
@media only screen and (min-width: 58.75em) { ... }
Foundation v3
/* Very large display targeting */
@media only screen and (min-width: 1441px) { ... }
/* Medium display targeting */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }
/* Small display targeting */
@media only screen and (max-width: 767px) { ... }
/* Small display targeting */
@media only screen and (max-width: 767px) { ... }
/* Landscape orientation targeting */
@media screen and (orientation: landscape) { ... }
/* Portrait orientation targeting */
@media screen and (orientation: portrait) { ... }
/* Mobile styles */
@media only screen and (max-device-width: 1280px) { ... }
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home