20 min25 XP

Media Queries

Screen Breakpoints and Responsive CSS

Step 1 of 5

What are Media Queries?

Media queries let you apply different CSS styles based on the screen size! They're like "if statements" for CSS.

Think of it like:

"IF the screen is small, use small text."

"IF the screen is big, use big text."

How They Work

📄 css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/* Default styles for mobile */body {  font-size: 16px;} /* Tablet styles */@media (min-width: 768px) {  body {    font-size: 18px;  }} /* Desktop styles */@media (min-width: 1024px) {  body {    font-size: 20px;  }}

Default (Mobile)

Font size: 16px - Small screens get this

@media (min-width: 768px)

Font size: 18px - Tablets get this

@media (min-width: 1024px)

Font size: 20px - Desktops get this