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 quries

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolutio

media queries

@media screen and (max-width: 480px) { }