Wednesday, 30 April 2014

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