CSS

media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

media query

/* Smartphones and larger (mobile-first) */

/* Tablet portrait and larger */
@media only screen and (min-width: 600px) {}
/* Tablet landscape and larger */
@media only screen and (min-width: 900px) {}
/* Desktop and larger */
@media only screen and (min-width: 1200px) {}
/* Big desktop (4k) */
@media only screen and (min-width: 2500px) {}

media query

@media only screen and (min-device-width: 900px) and (max-device-width: 1200px) {
  /* insert styles here */
}

media query new syntax

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

media query new syntax

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

media query new syntax

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

media query new syntax

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

media query new syntax

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

media query new syntax

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

where to put media query

media query common breakpoints