📱 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
Media Types
🧭 Common Conditions
💎 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).
