How to write media queries in CSS

Опубликовано: 12 Октябрь 2024
на канале: Coder Coder

32,899

1.3k

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

When you're building a responsive website, it can be confusing to know exactly how to write media queries, and what breakpoints you should use.

0:00 - Intro
0:21 - @media at-rule
1:05 - Setting up files
1:34 - Writing media queries in styles
2:26 - Media query syntax targeting viewport widths
3:38 - What are breakpoints?
4:38 - Which breakpoints should you choose?
5:06 - Choosing a range of breakpoints
7:26 - Using primarily min-width only in breakpoints
8:46 - Simple example of comparing min-width with max-width breakpoints
11:54 - Why I use em units in my breakpoints

Blog post -- https://coder-coder.com/media-query-b...

_____________________________________

SUPPORT THE CHANNEL
⭐ Join channel members and get perks:    / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...

🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter --   / thecodercoder
Instagram --   / thecodercoder

#webdevelopment #coding #programming