---
title: "What are media queries in CSS, and how do they enable responsive design?"  
description: "What are media queries in CSS, and how do they enable responsive design?"  
author: "Ashutosh Patel"  
published: 2024-10-28  
updated: 2024-10-28  
canonical: https://www.mindstick.com/interview/33986/what-are-media-queries-in-css-and-how-do-they-enable-responsive-design  
category: "css-css3"  
tags: ["css-css3", "responsive design", "css", "css position", "css styling"]  
reading_time: 2 minutes  

---

# What are media queries in CSS, and how do they enable responsive design?

**Media queries** allow you to apply CSS styles based on specific conditions, such as screen size, orientation, or device type. They're essential for responsive design, which allows web pages to adapt their layout and style to different devices and screen resolutions.

The most common media queries use the min-width and max-width properties to target different screen sizes. For example, you can create a mobile-friendly design by applying a style only when the screen width is less than a certain value.

## Example-

```css
/* Default styles for large screens */
body {
 font-size: 16px;
}
/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
 body {
   font-size: 14px;
 }
}
/* Styles for screens larger than 1200px */
@media (min-width: 1200px) {
 body {
   font-size: 18px;
 }
}
```

**Also, Read:** [What is the difference between margin and padding](https://www.mindstick.com/interview/33974/what-is-the-difference-between-margin-and-padding)

## Answers

### Answer by Ashutosh Patel

**Media queries** allow you to apply CSS styles based on specific conditions, such as screen size, orientation, or device type. They're essential for responsive design, which allows web pages to adapt their layout and style to different devices and screen resolutions.

The most common media queries use the min-width and max-width properties to target different screen sizes. For example, you can create a mobile-friendly design by applying a style only when the screen width is less than a certain value.

## Example-

```css
/* Default styles for large screens */
body {
 font-size: 16px;
}
/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
 body {
   font-size: 14px;
 }
}
/* Styles for screens larger than 1200px */
@media (min-width: 1200px) {
 body {
   font-size: 18px;
 }
}
```

**Also, Read:** [What is the difference between margin and padding](https://www.mindstick.com/interview/33974/what-is-the-difference-between-margin-and-padding)


---

Original Source: https://www.mindstick.com/interview/33986/what-are-media-queries-in-css-and-how-do-they-enable-responsive-design

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.