Responsive design in CSS relies heavily on the ability to apply distinct style rules based on the characteristics of the device rendering the content. By utilizing fluid grids, flexible media, and conditional logic, developers can ensure interfaces remain functional and visually consistent across a wide spectrum of screen sizes and resolutions.

Core Responsive Techniques

• Relative Units: Utilizing percentage-based widths or viewport units (e.g., vw, vh) allows layout containers to resize dynamically relative to their parent element, rather than adhering to fixed pixel values.
• Fluid Media: To prevent images from overflowing their containers, apply max-width: 100% combined with height: auto. This ensures visual assets scale down proportionally on smaller screens.
• Conditional Styling: Media queries serve as the logic gate, enabling specific CSS blocks to execute only when defined criteria—such as viewport width, device orientation, or resolution—are met.

Advanced Media Query Patterns

Width-Based Breakpoints

Defining styles based on the viewport width is the most common method for restructuring layouts between mobile, tablet, and desktop views.

/* Target screens larger than a typical mobile device */
@media screen and (min-width: 768px) {
  .main-navigation {
    display: flex;
    justify-content: space-between;
  }
}

/* Target smaller handheld devices */
@media screen and (max-width: 767px) {
  .main-navigation {
    flex-direction: column;
  }
}

Orientation Specificity

Adjusting the interface based on whether the device is held in portrait or landscape mode can significantly improve the user experience for media-heavy applications.

/* Styles applied when the device is in landscape mode */
@media screen and (orientation: landscape) {
  .media-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Styles applied when the device is in portrait mode */
@media screen and (orientation: portrait) {
  .media-gallery {
    grid-template-columns: 1fr;
  }
}

Compound Feature Queries

Multiple conditions can be chained together to target very specific scenarios, ensuring styles only apply when all criteria are satisfied.

/* Targets medium-sized screens in landscape orientation */
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
  .dashboard-widget {
    padding: 1rem;
    border: 1px solid #ccc;
  }
}

Logical Operators

The not, only, and and keywords provide granular control over query logic, allowing for negation or explicit device targeting.

/* Exclude print devices from these styles */
@media not print {
  .screen-only-content {
    display: block;
    color: #333;
  }
}

/* Apply exclusively to screen devices, hiding from older browsers that don't support media queries */
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Viewport Height Constraints

While width is often the primary focus, height-based queries are essential for modals, full-screen sections, and vertical scrolling interactions.

/* Adjust layout for shorter viewports */
@media screen and (max-height: 500px) {
  .sticky-header {
    position: static;
  }
  .hero-banner {
    padding: 20px 0;
  }
}