Media Queries
📌 Covered in this chapter:
@media · min-width · max-width · Width/Height Queries · Orientation · Dark Mode · Reduced Motion · Pointer · Hover · Print · Combining Queries
Welcome to Chapter 28: Media Queries — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1@media — Conditional Styles
Media queries viewport or device features ni check chesi conditional styles apply cheyyadaniki use chestayi.
CSS — Responsive Grid▶ Try in Editor
.course-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.course-grid {
grid-template-columns: 1fr;
}
}2Width, Height & Orientation Queries
CSS
/* Mobile-first */
.sidebar { display: none; }
@media (min-width: 768px) {
.sidebar { display: block; width: 240px; }
}
@media (orientation: landscape) and (max-height: 500px) {
.hero { min-height: auto; padding: 2rem; }
}3User Preference Queries
CSS — Accessibility Media Features
@media (prefers-color-scheme: dark) {
:root { --bg: #111827; --text: #f9fafb; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
@media (hover: hover) and (pointer: fine) {
.card:hover { transform: translateY(-4px); }
}
@media print {
.nav, .sidebar { display: none; }
body { font-size: 12pt; color: #000; }
}Combining queries: @media (min-width: 768px) and (max-width: 1024px) — comma for OR: @media (max-width: 768px), (orientation: portrait)