📱 CSS Media Queries (Responsive Design)

Last Updated: November 2025

CSS Media Queries are used to make your web page responsive — so it looks good on different devices like mobiles, tablets, and desktops.

🗣 Hinglish Tip: Media query ek if condition jaisa hai CSS ke liye — "agar screen itni chhoti hai, to ye style lagao".

Syntax

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

Common Breakpoints

Device	Screen Width	Example Media Query
Small Phone	≤ 480px	@media (max-width: 480px)
Tablet	481px–768px	@media (min-width: 481px) and (max-width: 768px)
Small Laptop	769px–1024px	@media (min-width: 769px)
Large Screen	≥ 1200px	@media (min-width: 1200px)

Media Types

Media Type	Description
all	Applies to all devices (default)
screen	Computer, mobile, tablet screens
print	For printers or print preview
speech	For screen readers (voice output)

🧭 Common Conditions

Condition	Example	Description
max-width	(max-width: 768px)	When screen width ≤ 768px
min-width	(min-width: 1024px)	When screen width ≥ 1024px
orientation	(orientation: landscape)	When device is in landscape mode
aspect-ratio	(aspect-ratio: 16/9)	When width:height = 16:9
prefers-color-scheme	(prefers-color-scheme: dark)	Detects dark mode preference

💎 Example 1: Mobile First Design

/* Default (Mobile)  */

body {
  font-size: 16px;
}

/* Tablet   */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Desktop  */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

🗣 Hinglish Tip: Mobile-first approach me pehle chhoti screen ke liye likhte ho, phir bada hone par new rules add karte ho.

💡 Example 2: Orientation

Adjusts image size based on screen orientation.

@media (orientation: landscape) {
  img {
    width: 70%;
  }
}
@media (orientation: portrait) {
  img {
    width: 100%;
  }
}

💎 Example 3: Dark Mode Detection

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: white;
  }
}

🗣 Hinglish Tip:User ne agar system dark mode on kiya hai — to ye query uske hisaab se style change karegi 🌙

🧠 Example 4: Multiple Conditions

Applies styles only between 768px and 1200px screen widths.

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .container {
    width: 80%;
  }
}

⚙️ Example 5: Print Styles

@media print {
  body {
    background: white;
    color: black;
  }
  nav,
  footer {
    display: none;
  }
}

🗣 Hinglish Tip:Print media me kuch sections hide karna useful hota hai (jaise nav bar, ads).

← Previous Next →