Documentation: https://web.dev/learn/design/media-queries/

media_query_examples.css

/* You can use @media or link to a seperate print stylesheet 

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

<link rel="stylesheet" href="specific.css" media="type and (feature)">

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
*/

@media print {
  body {
    background-color: transparent;
  }
}

@media type and (feature) {

}

@media (orientation: landscape) {
   // Styles for landscape mode.
}

@media (orientation: portrait) {
   // Styles for portrait mode.
}

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

@media (min-width: 25em) {
  // You can use any css length units.
}

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

/* This example: A breakpoint at 50em to make the interface more legible.
    Using the column-count property, he text is divided into two columns from that point on. */

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}