CSS Media Queries Explained with Examples for Beginners

Learn CSS Media Queries with practical examples. Understand responsive design, breakpoints, mobile-first layouts, responsive Flexbox, typography scaling, and modern frontend techniques.
CSS Media Queries Explained with Examples
CSS Media Queries are used to create responsive websites that adapt to different screen sizes and devices.
Modern websites must work properly on:
- mobile phones
- tablets
- laptops
- desktops
- large screens
Media Queries help developers build flexible layouts and responsive user interfaces for all devices.
Responsive design is one of the most important parts of modern frontend development.
What are CSS Media Queries?
Media Queries allow developers to apply CSS styles conditionally based on:
- screen width
- screen height
- device type
- orientation
- resolution
Example:
@media (max-width: 768px) {
body {
background: black;
}
}
This applies styles only on screens smaller than 768px .
Why Media Queries are Important
Without responsive design:
- layouts break on mobile devices
- text becomes difficult to read
- UI elements overflow
- user experience suffers
Modern frontend applications must support multiple screen sizes properly.
Basic Media Query Syntax
Example:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Structure:
@media (condition) {
CSS Rules
}
Common Media Query Types
| Query | Purpose |
|---|---|
max-width | Styles below a width |
min-width | Styles above a width |
orientation | Portrait or landscape |
hover | Detects hover support |
Most responsive websites primarily use width-based queries.
max-width Example
Example:
@media (max-width: 600px) {
h1 {
font-size: 24px;
}
}
This reduces heading size on smaller screens.
Very common in mobile-responsive design.
min-width Example
Example:
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}
This applies styles on larger screens.
Often used in desktop layouts.
Mobile-First Responsive Design
Modern frontend development usually follows:
Mobile First Design
Meaning:
- build mobile layout first
- progressively enhance for larger screens
Example:
.card {
width: 100%;
}
@media (min-width: 768px) {
.card {
width: 50%;
}
}
This is a modern responsive approach.
Responsive Flexbox Example
HTML:
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
CSS:
.container {
display: flex;
gap: 20px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Desktop:
Card 1 | Card 2
Mobile:
Card 1
Card 2
This creates a responsive layout.
Responsive Navigation Example
Example:
.nav-links {
display: flex;
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
}
Very common in mobile navigation systems.
Responsive Typography Example
Example:
h1 {
font-size: 48px;
}
@media (max-width: 768px) {
h1 {
font-size: 32px;
}
}
This improves readability on smaller screens.
Breakpoints in Responsive Design
Breakpoints are screen widths where layouts change.
Common modern breakpoints:
| Device | Width |
|---|---|
| Mobile | 480px |
| Tablet | 768px |
| Laptop | 1024px |
| Desktop | 1280px |
These values vary depending on design systems.
Orientation Media Query
The orientation query detects device orientation.
Example:
@media (orientation: landscape) {
body {
background: gray;
}
}
Common values:
- portrait
- landscape
Hover Media Query
Example:
@media (hover: hover) {
button:hover {
background: purple;
}
}
Useful for improving mobile user experience.
Combining Media Queries
Example:
@media (min-width: 768px) and (max-width: 1024px) {
body {
background: lightgray;
}
}
This targets tablets specifically.
Real-World Responsive Layout Example
CSS:
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
This creates a fully responsive grid system.
Common Beginner Mistakes
Using too many breakpoints
This creates difficult-to-maintain CSS.
Ignoring mobile devices
Mobile responsiveness is essential in modern frontend development.
Using fixed widths
Responsive layouts should use flexible sizing.
Writing desktop-first layouts only
Modern applications usually benefit from mobile-first architecture.
Media Queries in Modern Frontend Development
Media Queries are heavily used in:
- React applications
- Next.js projects
- Tailwind CSS systems
- SaaS dashboards
- admin panels
- mobile-responsive websites
Every modern frontend application depends on responsive design.
Media Queries vs Tailwind CSS
Tailwind CSS internally uses responsive media queries.
Example:
<div class="md:flex">
</div>
This activates Flexbox on medium screens and larger.
Understanding core Media Queries is still extremely important.
Production Tip
Professional frontend developers usually:
- design mobile-first layouts
- use consistent breakpoints
- avoid excessive media queries
- prioritize readability on smaller screens
- test layouts on multiple devices
Responsive design quality dramatically affects user experience.
Real-World Use Cases
Media Queries are used in:
- responsive navigation bars
- mobile menus
- responsive grids
- typography scaling
- dashboards
- pricing sections
- blog layouts
- landing pages
Modern UI systems heavily depend on responsive behavior.
Why Media Queries Matter
Media Queries help developers create:
- responsive interfaces
- scalable layouts
- mobile-friendly experiences
- professional frontend systems
Responsive design is one of the foundations of modern web development.
Conclusion
CSS Media Queries are essential for building responsive and device-friendly websites.
Understanding breakpoints, responsive layouts, mobile-first design, and adaptive styling helps developers create scalable frontend applications.
As you move into advanced CSS, Tailwind CSS, React, and Next.js, Media Queries become even more important because modern frontend systems must support multiple screen sizes and devices effectively.