CSS Media Queries Cheatsheet

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Tablet only */
}

@media (max-width: 639px), (orientation: portrait) {
  /* Mobile OR portrait orientation */
}

@media not screen {
  /* Not a screen device (print, etc.) */
}

@media not (hover: hover) {
  /* Devices that cannot hover */
}

@media only screen and (min-width: 768px) {
  /* Only applies to modern browsers */
}

/* Greater than or equal */
@media (width >= 768px) { }

/* Less than */
@media (width < 1024px) { }

/* Range (between) */
@media (768px <= width < 1024px) { }
@media (768px <= width <= 1023px) { }

/* Equivalent to traditional syntax */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Define a container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Query the container */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* Anonymous container */
@container (min-width: 300px) {
  .item { /* Queries nearest ancestor container */ }
}

/* Size queries on inline axis only (width in horizontal writing) */
container-type: inline-size;

/* Size queries on both axes */
container-type: size;

/* No size queries, but can be queried with style() */
container-type: normal;

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

@media (min-width: 1280px) {
  html { font-size: 18px; }
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

@media print {
  /* Hide navigation and footers */
  nav, footer, .no-print { display: none; }

  /* Use black text on white */
  body {
    color: black;
    background: white;
  }

  /* Avoid page breaks inside elements */
  article, section {
    page-break-inside: avoid;
  }

  /* Show full URLs for links */
  a[href]::after {
    content: " (" attr(href) ")";
  }
}