CSS media queries min and max width

@media print {
  body {
    font-size: 10pt;
  }
}


@media screen {
  body {
    font-size: 13px;
  }
}


@media all {
 body {
    font-size: 13px;
  }
}


@media {
 body {
   font-size: 13px;
 }
}

Responsive breakpoints:

min-width

When we declare a min-width value of 500px, it means that this CSS will be effective for screen widths ranging from a minimum of 500px to any higher value.

@media (min-width: 500px) {
  h1 {
    color: red;
  }
}

// so this CSS will work, when screen size 500 to 500+. below 500 it's will not work.

max-width

When we declare a max-width value of 500px, it means that this CSS will be effective for screen widths up to a maximum of 500px.

@media (max-width: 500px) {
  h1 {
    color: red;
  }
}

// so this CSS will work, when screen size 0 to 500. after 501 it's will not work.

orientation: landscape

When we specify the orientation as ‘landscape,’ it means that this CSS will be effective when the device is in a landscape orientation, in short we can tell when screen width is big compare to height.

@media (orientation: landscape) {
  .container{
    flex-direction: row;
  }
}

orientation: portrait

When we specify the orientation as ‘portrait,’ it means that this CSS will be effective when the device is in a portrait orientation, typically referring to a taller height than width.

@media (orientation: portrait) {
  .container{
    flex-direction: column;
  }
}