CSS Academy · Lesson

Combining Multiple Media Queries

Use and, or, and not operators to combine media features into complex queries.

The and Operator

The and keyword requires all conditions to be true simultaneously. Useful for targeting specific device sizes and types together.

@media screen and (min-width: 768px) {
  /* Screens 768px and up */
}

Combining min-width and max-width with and targets a specific viewport width range (tablet-only styles):

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet range only */
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}