Responsive Web Design – Media Queries

Subject: css

Responsive Web Design – Media Queries

Media Queries are a key feature in Responsive Web Design (RWD) that allow you to apply different CSS styles based on the screen size, device type, orientation, and other media characteristics. This makes it possible to create websites that adapt fluidly to various environments—from large desktop monitors to mobile phones.

Why Use Media Queries?

  • Adjust layout and styling based on screen dimensions
  • Improve user experience across different devices
  • Customize font sizes, paddings, or hide/show elements
  • Essential for building mobile-first or device-agnostic designs

Basic Syntax

🚀 Try it in Compiler

Common Example:

🚀 Try it in Compiler

This media query applies the background color only when the screen width is 768 pixels or less.

Example: Responsive Layout with Media Queries

🚀 Try it in Compiler

Explanation

  • Default Style: Applies for devices larger than 768px
  • First Media Query: Triggers at 768px or smaller (tablet view)
  • Second Media Query: Triggers at 480px or smaller (mobile view)
  • The background color and font size change according to the screen size

Best Practices

  • Use mobile-first approach (min-width) and scale up
  • Group related media queries for maintainability
  • Avoid duplicating styles—override only what’s necessary
  • Always test your layout on multiple screen sizes and devices

Key Takeaways

  • Media queries allow conditional styling based on screen size and features
  • Use min-width for mobile-first design, max-width for desktop-down
  • Essential for adjusting layouts, fonts, visibility, and alignment
  • Combine with flexbox, grid, and responsive images for full control
  • Helps ensure cross-device compatibility and improves SEO
Next: Responsive Web Design Images