Home 〉 CSS Tutorials 〉 CSS Media Query Tutorial for Responsive Design with Examples

CSS Media Query Tutorial for Responsive Design with Examples !

CSS Media Query Tutorial for Responsive Design with Examples !

Want your site to look good on all screen sizes? Media queries help you apply CSS rules based on screen width, height, resolution, or device type. Learn how to build responsive layouts for mobiles, tablets, and desktops. It’s essential for modern web design.

Introduction

CSS Media Queries are a powerful feature in CSS that let you apply styles depending on the screen size, resolution, orientation, and more. It's the core of responsive web design.

In this tutorial, we'll cover:

  • What are CSS media queries?
  • Syntax and structure
  • Common media features
  • Examples of media queries
  • Using breakpoints effectively
  • Tips and best practices

What is a Media Query?

A CSS media query lets you conditionally apply CSS styles based on the user's device or screen. This is useful for adjusting layouts and design for mobile, tablet, and desktop views.

Basic Syntax

Syntax ✍

@media media-type and (media-feature) {
/* CSS rules here */
}

Example:

Example 📄

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

Meaning: When the screen width is 768px or smaller, the background color of the body will be light blue.

Common Media Features

Media Feature Description
'max-width' Target screens smaller than a given width
'min-width' Target screens larger than a given width
'max-height' Similar but for height
'orientation' Detects landscape or portrait mode
'resolution' Based on pixel density

CSS Media Query Examples

Example 1: Responsive Font Size

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

.para {
font-size: 14px;
background-color: white;
padding: 20px;
border: 1px solid black;
border-radius: 10px;
}
@media (max-width: 600px) {
.para {
background-color: yellow;
}
}

</style>
</head>
<body>

<p class="para">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum minima facilis necessitatibus soluta eligendi a qui cum, provident voluptatibus iure aut nulla dicta atque ipsum impedit perferendis placeat. Perferendis, quidem?</p>

</body>
</html>

output 📌

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum minima facilis necessitatibus soluta eligendi a qui cum, provident voluptatibus iure aut nulla dicta atque ipsum impedit perferendis placeat. Perferendis, quidem?

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation: On screens smaller than 600px, the background color turns to yellow.

Example 2: Responsive Layout Change

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

.container {
width: 100%;
background: coral;
padding: 20px;
}
@media (min-width: 768px) {
.container {
width: 50%;
margin: auto;
background: pink;
}
}

</style>
</head>
<body>

<div class="container">Responsive Box</div>

</body>
</html>

output 📌

Responsive Box
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation: The '.container' takes full width on mobile and 50% width on tablets and above.

Example 3: Orientation Based Styles

Example 📄

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

Explanation: The background color will change only when the screen is in landscape mode.

Combining Media Features

Example 📄

@media screen and (min-width: 600px) and (orientation: portrait) {
.menu {
display: block;
}
}

Explanation: Styles apply only if the screen is 600px or wider and in portrait mode.

Common Breakpoints (Responsive Design)

Device Width Range
Mobile 0 - 600px
Tablet 601px - 1024px
Desktop 1025px and above

Use these as your base for writing responsive media queries.

Best Practices

  • Use 'em' or 'rem' units for breakpoints for better accessibility.
  • Start with a mobile-first approach ('min-width').
  • Don't overuse breakpoints—only when needed.
  • Combine features when necessary to reduce duplicate code.

Conclusion

CSS media queries are the foundation of modern, responsive websites. They help you build layouts that look great on all screen sizes—from mobile phones to large monitors. Practice using breakpoints and writing flexible CSS to improve your frontend skills.

Suggest Posts:

Related Topics:

Frequently Asked Questions (FAQs)

What is the purpose of media queries?

To apply CSS styles based on device properties like width, height, and orientation.

Are media queries supported by all browsers?

Yes, all modern browsers fully support media queries.

What's the difference between 'min-width' and 'max-width'?
  • 'min-width': Applies styles to screens 'greater than or equal to' the value.
  • 'max-width': Applies styles to screens 'less than or equal to' the value.
Can I use multiple media queries in one stylesheet?

Yes, you can use as many as needed for different screen sizes.

Is mobile-first design important?

Yes, it's a good practice for performance and better UX on smaller devices.

Previous Post Javascript Tutorials