Media Query Generator

Query Builder

@media (min-width: 768px) {
  /* Your styles here */
}

Common Breakpoints

@media (min-width: 640px) {
  /* Small devices */
}

@media (min-width: 768px) {
  /* Medium devices */
}

@media (min-width: 1024px) {
  /* Large devices */
}

@media (min-width: 1280px) {
  /* Extra large devices */
}

@media (min-width: 1536px) {
  /* 2X large devices */
}

Device-Specific Queries

@media only screen and (min-device-width: 375px) and (max-device-width: 428px) and (-webkit-min-device-pixel-ratio: 2)

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi)

@media print

@media (prefers-color-scheme: dark)

@media (prefers-color-scheme: light)

@media (prefers-reduced-motion: reduce)

@media (prefers-contrast: high)

@media (hover: none) and (pointer: coarse)

@media (hover: hover) and (pointer: fine)

@media (max-width: 480px) {
  /* Small phones */
}

@media (min-width: 481px) and (max-width: 767px) {
  /* Phones in landscape */
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Tablets and small laptops */
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* Tablets in landscape */
}

@media (min-width: 1200px) and (max-width: 1919px) {
  /* Desktop screens */
}

@media (min-width: 1920px) {
  /* Large desktop screens */
}