Learn how to use Media queries & Container queries

Показать описание

A dive into the world of media queries and container queries, covering the basics of how each works, the differences between them, when you might want to use one over the other, and more.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:55 - New merch!
01:27 - Media query basics
03:20 - Updating custom properties with media queries
05:00 - Creating ranges
07:35 - The new syntax
10:25 - Media queries are for more than only the size of the viewport
12:07 - Container query basics
15:23 - The difference between media and container queries
19:53 - Naming our containers
22:00 - container shorthand
22:30 - Quick recap
23:05 - Container Query Units
27:00 - Might be worth defining the html element as a container… maybe
28:58 - Style queries
32:50 - Which one should you be using?

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Рекомендации по теме

Комментарии

Wow Kevin. How did you know I was just thinking this past weekend that I need to adopt container queries in 2024. You got a crystal ball on your desk. 😀

donmorris

Such a naturally gifted teacher. Assumes no preunderstanding, and breaks it down in practical ways that are easy to digest.

scottonanski

I'm a backend developer, but I always enjoy watching your videos

AhmadNasriya

I know across the web you see "mobile first" but for me it has always seemed easier to do desktop first. It always seems easier to take away things as things get smaller rather than add things as things get bigger... so for this reason I've always been a fan of "max-width" instead of "min-width".

thecyberhobbit

That was a really great overview! The only problem with your videos is that, every time I watch one, I want to go back and redesign my entire website. At this rate, I'll *never* get it finished!

thomasm

great timing on the video, i just finished a design template using container queries and want to use them more, i think they are much more useful for responsive designing elements, i like your idea of making <html> a container, i will play with that, always learning something new, thanks Kevin

sovereignlivingsoul

Thanks for all the work you do to keep us up to date on the latest in CSS. Been watching for years and have taken several of your courses - and I never fail to learn something. And teaching me anything is not a simple task. 😀

MrHubtech

You are an awesome teacher. Tried to learn the same stuff from other channels, but here got more than that.

kaustavroy

I can’t live without clamp(). I’ve gotten so obsessed with coding responsively that I feel like a failure if I have to use a media query for most things . Sometimes layout stuff where flex wrap or grid auto fit doesn’t work and can’t be helped but love that with grid template areas I can just redeclare the areas and i don’t have to unset grid children columns and rows. And padding and margins in EMs with clamp is just so perfect. CSS forever! And now popover is supported ! Was just playing with it 2 weeks ago and Firefox held me back but poof! Now it’s green!!

clevermissfox

One of the greatest videos! It helped me a lot to grasp container queries comprehensively. Thank you

dongbinkim

Whenever I have a question about something in CSS, you always end up making a video about it sooner or later 🥰

lilaznboy

Perfect timing
My friend was asking me to recommend a video like this
Thank you

aberefejiro

My approach is to try the least amount of media queries or container queries. Same counts for grids, I use variable grids, with with with a min-width which can be never narrow at any circumstances, but breaks seamlessly in the next row. Very similar to the flex wrap behaviour, where the content just goes to the next line, if the width gets too small.

I know there are cases, where we need or want to use media queries, but then I always start to make a comparison for each breakpoint where it gets more complexity. Some are at mobile, some will be at desktop view. This also helps to figure out, which direction of media query you will need. Be it min-width or max-width.

Fonts and spacings I make use of clamp and calc features, so everything stays fluid in all more or less modern browsers.

Hopefully, this piece of information is helpful to those are new into the niche — dealing with dirty code inside hell.

PicSta

I have had a use-case where I used min(2cqw, 2cqh) for font-size. This was used in a page that would scale nicely with the available space. It would automagically switch from portrait to landscape, with an appropriate font size. (Ok, Clamp was also used to keep things from becoming unreadable.)
It might be fun to see master Kevins take on doing something like this.

FrankRoos-bq

Thanks a lot man. Few minutes ago I was struggling to use media queries and it's like that you felt my pain of media queries anyway this will helpful to me.😂😂

Horumar

I always need a review on container queries, I seem to have a brain block. Thanks!

colleenwieder

Thank you, very much, Kevin! I enjoyed the first part about media, although I already knew about this topic (sometimes little things come to light). The second part about container is brilliant!

nataliakaraseva

this is the first time I heard about container queries. Thanks Kevin!

pioleonardo

Great content. I've been following you for a long time and appreciate all the insights you provide. I have a question regarding media queries, even though I'm not primarily a front-end dev and only touch base with it from time to time.

In my last project, I had to maintain a 1:1 and a 1:3 aspect ratio for several canvas grid items/components (7] on the same page. A dashboard. I tried using techniques similar to your approach with breakpoints for grid items and font sizes with components, but the flex inside the grid stretched the canvases to different sizes on devices like iPad Pro, iPad Mini, and phones. I used my breakpoints, but ended up calculating container sizes and grid items using JS constants based on the canvas aspect ratios and the total screen size (height and width). This made the code quite unreadable for anyone coming after me.

It would be really interesting to see how you manage/ would solve this to maintain different aspect ratios on various canvas components on the same page using media queries. Any tips or examples would be greatly appreciated! Thanks!

mariusj

It's definitely magical. I love it, and love only learning CSS NOW rather than 5-10-20 years ago. (I did try 10 years ago but just didn't click). Id be interested if you do a video on the different available container types regarding sizing. Aside: continer style queries ;)

Hoping my daughter will come back with a tinge of your accent. She's just gone to St John's area in Newfoundland for 5 months of school (she's 17, specifically Conception Bay South)

RobertMcGovernTarasis

Learn how to use Media queries & Container queries

Learn how to use Media queries & Container queries

Tutorial: Learn how to use CSS Media Queries in less than 5 minutes

Learn how to use AR-media in under 3 minutes

How Social Media Transforming Future Of Education | Social Media Use In Education | Role

Learn How to Use Media to Your Advantage

Fair Use - Copyright on YouTube

How To Use Hootsuite in 8 Minutes 2024 (Best Social Media Management Tool)

The best way to use media SUBTITLES to learn Spanish effectively (don't make this mistake!)

'Scrolling Smart: How to Master Responsible Social Media Use'

How to Use Social Media for Language Learning

Effective Use of Media in the Classroom

Learn From My Twitter FAIL - How to Use Social Media and Analytics to Promote Your Content

How To Use Buffer Social Media Management (2022)

How To Use Hootsuite For Beginners 2024 (Social Media Management For Your Business)

Do You REALLY Know How To Use Social Media Properly? HINT: Most Get The Marketing Basics Wrong!

I Was Shocked When I Learned About This

The Right Way to Use Social Media | Paula La Croix | TEDxYouth@TBSRJ

The Right Way to Use Social Media in Business #entrepreneur #business

Learn playfully and use media critically with fun

How to Use Social Media for your Business

Learn how to use Social Media. - DE - Digitalize

How did you learn how to use social media?

AI in Social Media | How Social Media Platforms Use AI Explained | Learning Spiral AI

How to Use Social Media to Learn About Athletic Programs