Viewport-related media features

Viewport-related Media Features

Viewport-related media features allow developers to apply different CSS styles based on the device's viewport dimensions, orientation, and other conditions. These features play a crucial role in responsive design, enabling web pages to adapt to various devices and screen sizes.

width and height Features

The width and height features match the width and height of the viewport. They can accept specific pixel values or range values.

/* Applied when the viewport width is exactly 600px */
@media (width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* Applied when the viewport width is at least 768px */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Applied when the viewport height is no more than 400px */
@media (max-height: 400px) {
  header {
    padding: 5px;
  }
}

Range queries can be combined using and:

/* Viewport width between 600px and 800px */
@media (min-width: 600px) and (max-width: 800px) {
  .sidebar {
    display: none;
  }
}

aspect-ratio Feature

The aspect-ratio feature matches the viewport's width-to-height ratio, expressed as width/height.

/* 16:9 widescreen display */
@media (aspect-ratio: 16/9) {
  .video-container {
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */
  }
}

/* Aspect ratio greater than 1 (landscape) */
@media (min-aspect-ratio: 1/1) {
  .landscape-only {
    display: block;
  }
}

orientation Feature

The orientation feature detects whether the device is in landscape or portrait mode.

/* Portrait mode */
@media (orientation: portrait) {
  .portrait-image {
    display: block;
  }
}

/* Landscape mode */
@media (orientation: landscape) {
  .landscape-image {
    display: block;
  }
}

resolution Feature

The resolution feature matches the device's pixel density, with units such as dpi, dpcm, or dppx.

/* High-resolution screens */
@media (min-resolution: 2dppx) {
  .high-res-image {
    background-image: url("image@2x.png");
  }
}

/* Use high resolution for printing */
@media print and (min-resolution: 300dpi) {
  body {
    font-size: 12pt;
  }
}

viewport-width and viewport-height Features

These features are similar to width and height but specifically target viewport dimensions.

/* Viewport width less than or equal to 500px */
@media (max-viewport-width: 500px) {
  .mobile-menu {
    display: block;
  }
}

Combining Dynamic Units with Viewport Media Queries

Combining viewport units with media queries can create more flexible layouts.

/* Use fixed values for small viewports */
@media (max-width: 600px) {
  .panel {
    width: 100%;
    padding: 10px;
  }
}

/* Use viewport units for large viewports */
@media (min-width: 601px) {
  .panel {
    width: 50vw;
    padding: 2vmin;
  }
}

Nested Media Queries

Media queries can be nested within CSS rules for better code organization.

.card {
  padding: 1rem;
  
  @media (min-width: 768px) {
    padding: 2rem;
    display: flex;
  }
  
  @media (min-width: 1200px) {
    max-width: 1140px;
    margin: 0 auto;
  }
}

Common Breakpoint Practices

Although device sizes continue to evolve, some common breakpoints are still widely used:

/* Extra small devices (phones, less than 576px) - Default styles often don't need media queries */

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets in landscape/small laptops, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

JavaScript Equivalent of Viewport Media Queries

In JavaScript, you can use window.matchMedia() to detect viewport conditions:

const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {
  if (e.matches) {
    console.log('Viewport width is at least 768px');
  } else {
    console.log('Viewport width is less than 768px');
  }
}

// Listen for changes
mediaQuery.addListener(handleTabletChange);

// Initial check
handleTabletChange(mediaQuery);

Performance Considerations for Viewport Media Queries

1. Place media queries as close as possible to the relevant selectors, rather than grouping them all at the bottom of the stylesheet.
2. Avoid unnecessarily complex media query conditions.
3. Using em instead of px for breakpoint units can improve accessibility.

/* Recommended: Media queries near relevant rules */
.navigation {
  display: block;
}

@media (min-width: 40em) {
  .navigation {
    display: flex;
  }
}

/* Not recommended: All media queries grouped at the end */
@media (min-width: 40em) {
  .navigation { ... }
  .header { ... }
  .content { ... }
}

Comparing Viewport Media Queries with Container Queries

Container queries are a newer feature that allows styles to be applied based on parent element dimensions rather than viewport dimensions.

/* Container query example */
.component {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .component .child {
    display: flex;
  }
}

While container queries offer more flexibility, viewport media queries still have advantages for overall layout adjustments.

Practical Use Cases for Viewport Media Queries

1. Responsive navigation bar:

.nav {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

2. Image grid layout:

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

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

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

3. Font size adjustments:

html {
  font-size: 16px;
}

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

@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

Debugging Tips for Viewport Media Queries

1. Use browser developer tools to simulate different devices.
2. Add temporary borders to help visualize breakpoints:

@media (min-width: 768px) {
  body {
    border: 5px solid red;
  }
}

@media (min-width: 992px) {
  body {
    border: 5px solid blue;
  }
}

3. Use custom properties to simplify media queries:

:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
}

@media (min-width: var(--breakpoint-md)) {
  /* Style rules */
}

Future Developments in Viewport Media Queries

New media query features are continually being introduced, such as:

1. Dynamic range media queries:

@media (100px <= width <= 500px) {
  /* New range syntax */
}

2. Scripting media queries:

@media (scripting: enabled) {
  /* When JavaScript is available */
}

3. Reduced motion preference:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}