- What is a Media Query?
A media query is basically a condition in CSS.
You tell the browser:
IF the screen satisfies this condition, THEN apply these CSS rules.
For example:
@media (min-width: 768px) {
.container {
display: flex;
}
}
Meaning:
"If the viewport is at least 768px wide, make .container a flex container."
So think:
IF condition is TRUE
↓
apply these CSS rules
2. Why do we need Media Queries?
Because users don't have one fixed screen.
Your website could be opened on:
📱 Phone
375px wide
📱 Large phone
430px wide
📱 Tablet
768px wide
💻 Laptop
1366px wide
🖥️ Desktop
1920px wide
You don't want to create five completely different websites.
Instead:
ONE HTML
+
BASE CSS
+
MEDIA QUERIES
↓
Responsive website
3. What does "Responsive" mean?
Responsive means:
The website adapts its layout and appearance according to the available screen/device size.
`For example:
Mobile
[ Card ]
[ Card ]
[ Card ]
[ Card ]
but on desktop:
[ Card ][ Card ][ Card ][ Card ]`
Same HTML.
CSS changes the layout.
4. The basic Media Query syntax
The basic structure is:
``` @media media-type AND (condition) {
/* CSS rules */
}
For example:
@media screen and (max-width: 600px) {
body {
background: lightblue;
}
}
There are three important pieces:
@media
↓
screen
↓
and
↓
(max-width: 600px)
↓
{ CSS }
Let's understand each one.
5. What is @media?
@media tells CSS:
"I'm about to write a media query."
Example:
@media (...) {
}
It's an at-rule in CSS.
Similar CSS at-rules you'll eventually see:
@media
@import
@font-face
@keyframes
For now, just remember:
@media = start a media query
6. What are Media Types?
You mentioned:
screen / speech etc.
YES. 👍
A media type tells CSS what kind of output/device the document is being presented on.
Common media types include:
screen
For screens.
Examples:
📱 Smartphone
📱 Tablet
💻 Laptop
🖥️ Desktop
Example:
@media screen and (max-width: 600px) {
...
}
print
For printed documents / print preview.
For example, your webpage looks like:
Website
[Header]
[Navigation]
[Buttons]
[Content]
But when someone prints it, you might want:
Content
----------------
No navigation
No advertisements
No unnecessary buttons
You can do:
@media print {
nav {
display: none;
}
}
Meaning:
When printing, hide the navigation.
speech
For speech synthesizers / screen-reading presentation.
Example:
@media speech {
...
}
This is much less commonly used in everyday responsive web development.
What about all?
There is also:
@media all {
...
}
all means the rules apply to all media types.
But here's something important:
You usually don't need to write all explicitly.
For example:
@media (max-width: 600px) {
...
}
is effectively a query without specifying a media type, and for modern responsive CSS this is perfectly normal.
7. So why do people write screen?
You might see:
@media screen and (max-width: 768px) {
...
}
But you'll very commonly see:
@media (max-width: 768px) {
...
}
Both are valid.
For normal responsive websites, the second form is usually cleaner.
So don't think:
"Media query MUST have screen."
Nope.
This is completely valid:
@media (max-width: 768px) {
...
}
8. Now the BIG part: Conditions / Expressions
This is where media queries become powerful.
You can ask the browser things like:
Is the viewport at least 768px wide?
Is it at most 600px wide?
Is the viewport between 600px and 1000px?
Is the device in portrait orientation?
Is it landscape?
Does the screen support hover?
Does the user prefer dark mode?
Does the device have a certain resolution?
These are called media features.
9. min-width
This is one of the MOST important ones.
@media (min-width: 768px) {
...
}
Means:
Apply these styles when the viewport width is 768px or greater.
Think:
width >= 768px
So:
500px ❌
700px ❌
767px ❌
768px ✅
800px ✅
1200px ✅
1920px ✅
10. max-width
Opposite.
@media (max-width: 768px) {
...
}
Means:
Apply these styles when viewport width is 768px or smaller.
Think:
width <= 768px
So:
400px ✅
600px ✅
768px ✅
769px ❌
1000px ❌
11. THIS is where Mobile-First comes in 🔥
You specifically asked about Mobile First.
Mobile-first means:
Write your default CSS for small screens first, then add changes for larger screens using min-width.
For example:
.card {
width: 100%;
}
This is your mobile/default style.
Then:
@media (min-width: 768px) {
.card {
width: 50%;
}
}
Then:
@media (min-width: 1200px) {
.card {
width: 25%;
}
}
So you're building progressively:
MOBILE
↓
base CSS
↓
768px+
↓
TABLET
↓
1200px+
↓
DESKTOP
12. Why is it called "Mobile First"?
Because your starting/default design is mobile.
Example:
.container {
display: block;
}
Mobile:
┌───────────┐
│ Card 1 │
├───────────┤
│ Card 2 │
├───────────┤
│ Card 3 │
└───────────┘
Then at 768px:
@media (min-width: 768px) {
.container {
display: flex;
}
}
Now:
┌──────────┬──────────┬──────────┐
│ Card 1 │ Card 2 │ Card 3 │
└──────────┴──────────┴──────────┘
That's mobile-first responsive design.
13. min-width vs max-width
This distinction is SUPER important.
Mobile-first
Usually:
/* Mobile */
.card {
width: 100%;
}
/* Bigger screens */
@media (min-width: 768px) {
.card {
width: 50%;
}
}
Think:
SMALL → BIG
↓ ↓
base → min-width
Desktop-first
You could instead do:
/* Desktop */
.card {
width: 25%;
}
/* Smaller screens */
@media (max-width: 768px) {
.card {
width: 100%;
}
}
Think:
BIG → SMALL
↓ ↓
base → max-width
Both work.
But mobile-first is widely preferred for responsive development.
14. Why do we prefer Mobile First?
Because you start with the simplest layout.
For example:
MOBILE
[Header]
[Content]
[Sidebar]
[Footer]
Then progressively enhance:
TABLET
[Header]
[Content] [Sidebar]
[Footer]
Then:
DESKTOP
[Header]
[Sidebar] [Content]
[Footer]
Instead of starting with a complicated desktop layout and constantly trying to remove things for smaller screens.
15. and
You asked:
what does and mean?
Exactly what you think.
It means:
BOTH conditions must be true.
Example:
@media screen and (min-width: 768px) {
...
}
Means:
Is this screen?
AND
Is width >= 768px?
↓
YES
↓
Apply CSS
If either condition is false → don't apply.
16. Multiple conditions
You can do:
@media (min-width: 768px) and (max-width: 1200px) {
...
}
Meaning:
width >= 768px
AND
width <= 1200px
Therefore:
500px ❌
700px ❌
768px ✅
900px ✅
1200px ✅
1300px ❌
This gives you a range.
17. or equivalent → comma ,
CSS doesn't normally write:
or
Instead, you can separate media queries with a comma.
Example:
@media (max-width: 600px), (orientation: portrait) {
...
}
This means:
width <= 600px
OR
portrait
If either is true → rules apply.
18. not
NOW the one you specifically asked about.
You may see:
@media not screen {
...
}
not means:
Negate the media query condition.
Very roughly:
condition is TRUE
↓
not
↓
becomes FALSE
For example, conceptually:
@media not print {
...
}
means:
Apply this when the presentation is not print.
But there's an important practical point:
Don't obsess over not yet.
In everyday responsive CSS, you'll use:
@media (min-width: ...)
@media (max-width: ...)
@media (orientation: ...)
far more often.
19. You can combine not, and, etc.
Media query logic can become:
@media not screen and (max-width: 600px) {
...
}
But when you're learning responsive layouts, don't start writing crazy logical expressions 😂.
Master these first:
(min-width)
(max-width)
(and)
(,)
(not)
20. Other VERY useful media features
Now let's go beyond width.
orientation
Checks whether the viewport is:
portrait
Height > width.
@media (orientation: portrait) {
...
}
Example:
┌──────────┐
│ │
│ │
│ │
│ │
└──────────┘
Phone held vertically.
landscape
Width > height.
@media (orientation: landscape) {
...
}
Example:
┌──────────────────┐
│ │
│ │
└──────────────────┘
Phone/tablet held sideways.
21. prefers-color-scheme
🔥 Very useful.
You can detect whether the user prefers:
light
dark
Example:
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
}
Meaning:
If the user's system/browser preference is dark mode, use dark styling.
This is how websites can automatically respond to system dark mode preferences.
22. hover
You can ask whether the user's primary input mechanism supports hovering.
Example:
@media (hover: hover) {
button:hover {
transform: scale(1.05);
}
}
Why useful?
A mouse:
🖱️
↓
hover possible
A typical touchscreen:
👆
↓
no traditional hover
So you don't always want to rely heavily on hover effects for touch devices.
23. pointer
You can also detect pointer characteristics.
For example:
@media (pointer: coarse) {
button {
padding: 20px;
}
}
coarse generally indicates a less precise pointing mechanism, such as touch.
So you might make buttons larger:
Touchscreen
┌─────────────────────┐
│ CLICK ME │
└─────────────────────┘
rather than tiny mouse-oriented controls.
24. resolution
You can query display resolution characteristics.
Example:
@media (min-resolution: 2dppx) {
...
}
This can be useful for high-density displays.
But again:
Don't prioritize this yet.
For responsive web development, width/height/orientation are much more important initially.
25. Width is actually about the VIEWPORT
This is another important concept.
When you write:
@media (max-width: 768px)
you're generally talking about the viewport width, not necessarily the physical width of the device.
Viewport = the area of the browser available for your webpage.
So:
Device
┌───────────────────────┐
│ Browser │
│ ┌───────────────────┐ │
│ │ VIEWPORT │ │
│ │ │ │
│ │ YOUR WEBSITE │ │
│ │ │ │
│ └───────────────────┘ │
└───────────────────────┘
Media queries respond to that available viewport.
26. You can query height too
Just like:
min-width
max-width
you have:
min-height
max-height
Example:
@media (max-height: 600px) {
.hero {
padding: 20px;
}
}
Meaning:
If the viewport height is 600px or less, reduce hero padding.
Useful for screens that are short vertically.
27. Width and height together
You could do:
@media (min-width: 768px) and (min-height: 600px) {
...
}
Both need to be true.
28. Let's build a REAL mobile-first example 🔥
Suppose we have:
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
Start with mobile:
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.card {
width: 100%;
}
Mobile:
┌──────────────┐
│ Card 1 │
├──────────────┤
│ Card 2 │
├──────────────┤
│ Card 3 │
└──────────────┘
Then tablet:
@media (min-width: 768px) {
.container {
flex-direction: row;
}
.card {
width: 33.33%;
}
}
Now:
┌────────┬────────┬────────┐
│ Card 1 │ Card 2 │ Card 3 │
└────────┴────────┴────────┘
That's literally mobile-first responsive design.
29. Multiple breakpoints
You can have several.
/* Mobile - default */
.container {
display: flex;
flex-direction: column;
}
/* Tablet */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
/* Desktop */
@media (min-width: 1200px) {
.container {
gap: 40px;
}
}
Think:
0px
│
│ Mobile
│
├──────── 768px
│
│ Tablet
│
├──────── 1200px
│
│ Desktop
│
└──────────────→
30. IMPORTANT: Don't memorize device names
This is something I REALLY want you to understand.
Don't write:
@media (min-width: 768px) {
/* tablet */
}
and assume:
768 = tablet forever.
No.
Breakpoints should be chosen based on when your layout needs to change, not because a particular number is magically "tablet."
For example, suppose your cards start getting cramped at:
850px
Then maybe your breakpoint should be:
@media (min-width: 850px) {
...
}
The layout determines the breakpoint.
Not:
"Google says tablet = 768px"
31. The most important mobile-first pattern
You'll see this everywhere:
/* Base = mobile */
.element {
...
}
/* Larger screens */
@media (min-width: 768px) {
.element {
...
}
}
/* Even larger */
@media (min-width: 1024px) {
.element {
...
}
}
This is basically:
BASE
↓
MOBILE
↓
min-width
↓
BIGGER
↓
min-width
↓
EVEN BIGGER
32. Media Queries don't only change layout
You can change ANY CSS property.
For example:
Font size
h1 {
font-size: 2rem;
}
@media (min-width: 768px) {
h1 {
font-size: 3rem;
}
}
Padding
section {
padding: 20px;
}
@media (min-width: 768px) {
section {
padding: 50px;
}
}
Grid
.container {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}
Flex direction
.container {
flex-direction: column;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
Visibility
.desktop-menu {
display: none;
}
@media (min-width: 768px) {
.desktop-menu {
display: block;
}
}
33. Media Query vs normal CSS
This is important.
Normal CSS:
.card {
background: red;
}
Means:
.card is red everywhere unless another rule overrides it.
Media query:
@media (min-width: 768px) {
.card {
background: blue;
}
}
Means:
.card becomes blue only when the viewport is at least 768px wide.
So:
Mobile
.card → RED
768px+
.card → BLUE
34. Media Queries are NOT JavaScript
This is also important.
You're not doing:
if (screen width > 768)
execute JavaScript
You're telling CSS:
IF this media condition matches,
USE THESE CSS RULES.
The browser continuously evaluates the media query.
So if you resize:
1200px
↓
800px
↓
500px
the matching CSS changes automatically.
35. One thing you should NOT do
Don't create 15 breakpoints like:
@media (min-width: 400px) {}
@media (min-width: 450px) {}
@media (min-width: 500px) {}
@media (min-width: 550px) {}
@media (min-width: 600px) {}
@media (min-width: 650px) {}
@media (min-width: 700px) {}
😂 That's usually a sign you're fighting your layout.
Instead:
Base
↓
one meaningful breakpoint
↓
another meaningful breakpoint
Use media queries when the design actually needs to change.
36. The mental model I want you to remember
Think of media queries as CSS if statements.
NORMAL CSS
↓
"Here's my default design."
@media (condition)
↓
"IF this condition becomes true..."
↓
"change these CSS properties."
For example:
.card {
width: 100%;
}
means:
Default: card takes the whole available width.
Then:
@media (min-width: 768px) {
.card {
width: 50%;
}
}
means:
IF viewport ≥ 768px → card becomes 50%.
🧠 Your Media Query Cheat Sheet
Syntax Meaning
@media Start media query
screen Screen-based presentation
print Printing / print preview
speech Speech presentation
all All media types
min-width Width is ≥ given value
max-width Width is ≤ given value
min-height Height is ≥ given value
max-height Height is ≤ given value
orientation: portrait Taller than wide
orientation: landscape Wider than tall
and Both conditions must match
, OR — either query can match
not Negates a media query
prefers-color-scheme User's light/dark preference
hover Whether hovering is supported
pointer Pointer precision characteristics
resolution Display resolution
🔥 And for YOU, right now, memorize only this
Top comments (0)