Media Queries
@media query CSS ko CONDITIONAL banata hai — sirf tab apply hota hai jab condition (usually screen width) match kare. "Breakpoints" wo specific widths hain jaha layout badalta hai (common: 768px tablet, 480px mobile, though exact values project-dependent hain).
(min-width: Xpx) "X ya usse bada" match karta hai (mobile-first approach mein common). (max-width: Xpx) "X ya usse chhota" match karta hai.
.container {
width: 100%;
padding: 10px;
}
/* Tablet aur bade screens ke liye: */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop ke liye: */
@media (min-width: 1024px) {
.container {
width: 960px;
}
}- @media (condition) { } = conditional CSS, screen size based
- min-width = "isse bada", max-width = "isse chhota"
- Breakpoints = specific widths jaha layout badalta hai
orientation feature detect karta hai device landscape hai ya portrait — tablets/phones ke liye useful jab layout orientation ke hisaab se badalna ho.
@media (orientation: landscape) {
.video-player {
height: 80vh; /* landscape mein zyada height use karo */
}
}
@media (orientation: portrait) {
.sidebar {
display: none; /* portrait mein sidebar hide karo, jagah kam hai */
}
}@media (prefers-color-scheme: dark) OS-level dark mode preference detect karta hai — automatically dark theme apply karne ke liye, bina user ko manually toggle karne ki zaroorat (though manual toggle bhi additionally provide karna best practice hai).
body {
background: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #f0f0f0;
}
}
/* User ka OS dark mode mein hai to automatically dark theme */