CSS Media Queries

Media queries allow you to create responsive designs by applying CSS styles only when specific conditions are met, such as screen width, height, device type, or orientation. This helps ensure your website looks good on desktops, tablets, and mobile devices alike.

What Are Media Queries?

A media query uses the @media rule to apply a set of CSS rules only when the condition inside the query is true.

Basic Syntax

				
					@media (condition) {
  /* CSS rules here */
}

You can target screen size, resolution, orientation, and more.

Example: Screen Width Below 800px

				
					<!DOCTYPE html>
<html>
<head>
  <title>CSS Media Queries – Learn With Arshyan</title>
  <style>
    .responsive-box {
      background-color: steelblue;
      color: white;
      padding: 20px;
      font-size: 24px;
      text-align: center;
    }

    @media (max-width: 800px) {
      .responsive-box {
        background-color: darkgreen;
        font-size: 18px;
      }
    }
  </style>
</head>
<body>

  <div class="responsive-box">
    Resize the browser to see the change.
  </div>

</body>
</html>

Explanation

By default, the box has a steel blue background and large text.
When the viewport width becomes 800px or less, the background turns green and the text size becomes smaller.

Common Media Query Examples

Target devices with max width of 600px (e.g., mobile phones):

				
					@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Apply styles between two widths:

				
					@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    padding: 30px;
  }
}

Based on orientation:

				
					@media (orientation: landscape) {
  .banner {
    height: 150px;
  }
}

Real-World Use Case

You can use media queries to:.

Change font sizes for small screens
Stack columns vertically on phones
Hide or show certain UI elements depending on the device
Adjust layout spacing or element sizes

Summary Table

Media Feature	What It Targets
`max-width`	Maximum width of viewport
`min-width`	Minimum width of viewport
`orientation`	Device orientation (landscape/portrait)
`max-height`	Maximum height of viewport
`resolution`	Screen resolution (dpi/dppx)
`aspect-ratio`	Width to height ratio

Learn With Arshyan Tip:

Mastering media queries is key to making your website responsive. Start small with a few breakpoints, then build as your layout grows.