Modern websites are viewed on many different devices, including smartphones, tablets, laptops, and large desktop screens. Since each device has a different screen size, a website needs to adapt its layout and design to provide the best user experience.

CSS Media Queries are a feature that allows developers to apply different styles based on the characteristics of a device, such as screen width, height, or orientation. Media Queries are one of the most important tools for creating responsive websites.

Why Are Media Queries Important?

Media Queries help developers:

• Create responsive layouts
• Improve mobile usability
• Adjust designs for different screen sizes
• Hide or display content when needed
• Enhance the user experience across devices

For example, a website may display three columns on a desktop screen but switch to a single column on a smartphone. Media Queries make this possible.

What Is a Media Query?

A Media Query checks a device condition and applies CSS rules only when that condition is true.

Basic Syntax

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

In this example:

• The styles inside the Media Query are applied only when the screen width is 768 pixels or less.
• On larger screens, the styles are ignored.

Common Breakpoints

Breakpoints are screen sizes where the layout changes.

Some commonly used breakpoints include:

• Mobile: 480px and below
• Tablet: 768px and below
• Laptop: 1024px and below
• Desktop: Above 1024px

These values can vary depending on the design requirements.

Changing Layouts with Media Queries

Media Queries can modify layouts for smaller screens.

Example

.container {
  display: flex;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

On larger screens, items appear side by side.

On smaller screens, items stack vertically.

Adjusting Font Sizes

Text should be easy to read on all devices.

Example

h1 {
  font-size: 40px;
}

@media (max-width: 600px) {
  h1 {
    font-size: 28px;
  }
}

The heading becomes smaller on mobile devices, preventing overflow issues.

Hiding Elements

Media Queries can show or hide content based on screen size.

Example

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

This hides the sidebar on smaller screens to create more space for the main content.

Using Orientation Queries

Media Queries can also detect device orientation.

Example

@media (orientation: landscape) {
  body {
    background-color: lightgray;
  }
}

This style applies when the device is in landscape mode.

Real-World Example

Imagine an online shopping website:

• Desktop users see a four-column product grid.
• Tablet users see two columns.
• Mobile users see one column.
• Large images and fonts are adjusted for smaller screens.

Media Queries ensure the website remains easy to use on every device.

Conclusion

CSS Media Queries are a key part of responsive web design. They allow developers to apply different styles based on screen size, orientation, and other device characteristics. By using Media Queries, you can create websites that look great and function properly on smartphones, tablets, laptops, and desktops. Learning Media Queries is essential for building modern, flexible, and user-friendly websites.