• Seo Expert
  • Khaali Paper

CSS Media Queries Examples

Media queries allowing content rendering to adopt accroding screen resolution or accroding to browser window size. Media queries are useful to responsive design. Media queries to assign different stylesheets depending on browser window size.

Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts, below are the following Media queries.

@media screen and (min-width : 1000px) and (max-width : 1100px) {

}
@media screen and (min-width : 768px) and (max-width : 1000px) {

}
@media screen and (min-width : 320px) and (max-width : 767px) {

}
@media screen and (min-width : 320px) and (max-width : 500px) {

}
@media screen and (min-width : 300px) and (max-width : 470px) {

}
SASS Media Queries Examples
@include media-breakpoint-up(lg){}

@include media-breakpoint-down(md){}

@include media-breakpoint-up(lg){}

@include media-breakpoint-down(md){}

@include media-breakpoint-up(sm){}

@include media-breakpoint-down(sm){}

breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
)

In this tutorial we see the different kinds of breakpoints and media queries according to responsive technique.

HTML Media Queries