Master Media Queries And Responsive CSS Web Design Like a Chameleon!
HTML-код
- Опубликовано: 10 апр 2023
- 🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
You might be wondering why there’s a Chameleon in the thumbnail of this video.
A Chameleon can change it’s color and pattern - adapting it’s appearance to match it’s environment.
The chameleon's ability to quickly and seamlessly change its appearance is a skill to be admired - and what I’m suggesting is that we ought to be more like the chameleon when creating our responsive layouts.
The mobile-first pre-defined media queries:
/* xs */
/* @media (min-width: 475px) {} */
/* sm */
/* @media (min-width: 640px) {} */
/* md */
/* @media (min-width: 768px) {} */
/* lg */
/* @media (min-width: 1024px) {} */
/* xl */
/* @media (min-width: 1280px) {} */
/* 2xl */
/* @media (min-width: 1536px) {} */
The desktop-first pre-defined media queries:
/* 2xl */
@media (max-width: 1536px) {}
/* xl */
@media (max-width: 1280px) {}
/* lg */
@media (max-width: 1024px) {}
/* md */
@media (max-width: 768px) {}
/* sm */
@media (max-width: 640px) {}
/* xs */
@media (max-width: 475px) {}
Mobile container utility class:
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* xs */
@media (min-width: 475px) {
.container {
max-width: 475px;
}
}
/* sm */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
/* md */
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
/* lg */
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
/* xl */
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
/* 2xl */
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
Desktop container utility class:
.container {
max-width: 1536px;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* 2xl */
@media (max-width: 1536px) {
.container {
max-width: 1280px;
}
}
/* xl */
@media (max-width: 1280px) {
.container {
max-width: 1024px;
}
}
/* lg */
@media (max-width: 1024px) {
.container {
max-width: 768px;
}
}
/* md */
@media (max-width: 768px) {
.container {
max-width: 640px;
}
}
/* sm */
@media (max-width: 640px) {
.container {
max-width: 475px;
}
}
/* xs */
@media (max-width: 475px) {
.container {
width: 100%;
}
} 
Наука
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
![Media Query in CSS [Easiest Way] | How To Write Media Queries FAST](/img/1.gif)
🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨
:OOOOOOO I really love that idea. Can you tell me if you use both dekstop and mobile containers in one css file or you select based on which design you start first like mobile -> dekstop or dekstop->mobile ?
P.S. Nevermind you just mentioned at the end + I remembered you mentioned only 6 media queries and if I used both that would be 12.
Nice job man, thanks a lot,
How did your browser show the screen size, please I need to know?
@@EtimDavid-rn2o open the chrome dev tools, toggle on the device toolbar, on the top right corners there's 3 dots, click them and select show media queries
Thanks. ❤️
Not only your solution is more elegant, but way easier to understand, I did always struggle with this concept, thank you for such an informative video!!!
you explain things very understandable. it would be really great to see some bootstrap or tailwind or some js framework videos from you.
One of the absolute greatest videos I’ve seen in regards to medía queries. One of the best CSS videos I’ve seen in general
The way you explain and show things with examples is sooooooo goooood! Congratulations for your hard work on educating us, it’s highly appreciated!
Fantastic video! could you make a video too how to use using %, px, em, vh and where to use it on perspective div, parent/children?
Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!
I'm so glad I found your channel! your videos are so engaging and to the point. Thank you so much!
just purchased your course as a refresher for CSS. excited!
I've never seen this many chameleons within the first 20 seconds of a video
All jokes aside tho, amazing video like always.
i loved your videos bro it was short and simple and most of all it was really helpful
I just learned how to use media queries thanks to you!!! THANK YOU!😁
I'm glad i found this channel. keep up the great work!!
i love you bro i was searching for a tutorial which is to the point and i struck gold on this one
your videos are amazing! thank you for making such high quality content!
Wow, what a great teacher - I learned what I wanted to know in minutes...I'm going to watch the rest of the tutorial and see what else I can learn. Thanks a lot!
finally someone who knows how to explain , without using fancy language. - all others "beginner" tutorials just gave me a headache. Hats down to you.
Pure CSS and HTML. I LOVE THIS!
Your presentation skills are second to none! Thank you very much for your very professional work.
How do i get my browser to show me pixel dimensions?
@@matthewnjoroge4759 see my comment
oh my god thank you so much for this, other videos were just complicating things so much
Love your videos! keep them coming.
This is exactly what I was looking for, life saver thanks man
Found you!!! I've been looking everywhere on how to arrange the elements if I have to view them in mobile and this video helps me so much! Thanks!
You are really always slaying the dragon....keep it up, man
Oh my god, this video that was i need to see. Thank you from Brazil, bro
man you are awesome please make content often.... we can learn a lot and sure... your going to make it a million subs.
Damn! Incredible content. Definitely, changing the width of 90% in the project I am currently working on!
Your explanation is great in a very short time. Best on RUclips.
thank youuuuuuu I've been struggling with my lesson lately and now i understand it
There are many solution to a single problem. You have the clarity to choose the best fit. What are the problems are you facing?
Great video as usual! :)
I was wondering if you would be interested in creating a video about those "pop in" animations when scrolling down while the elements get visible. That'd be dope, feels like every portfolio piece has them.
Sure great suggestion thanks ☺️❤️
@@slayingthedragoncan you please tell me which website are you using to shrink those size of websites without shrinking the actual chrome page
@@roronoazoro3163 it's a feature of the chrome dev tools. Google: "chrome devtools device mode" to find how to do it. Fyi Firefox also has that feature and it works better there in my opinion because you can also zoom in and out in it by just using ctrl + mouse wheel.
@@roronoazoro3163 Its not a website but dev tools in your browser. Right click, inspect and click on mobile icon on the top. I assume you already found an answer but in case you did not I hope this will help.
Very nice video as usually, explaining with practical work is very effective... your videos are the most understandable front-end tutorials on youtube in my opinion... I wonder if you do some videos about javascript concepts you would help us because are a little confusing.
I have been trying to understand the mobile design first concept for a while. How the heck do you do that? Yu have just shown me the way. Total brilliant. I go to a lot of instructors to get sorted, without success on this problem, but you were the best teaching the method. The only that took time to explain the difference between Max and MIn and how it relates t mobile first responsive desive. Well done. Now. if you just get the Javascript course done.
Informative, helpful and aesthetic 5/5 tutorial. Earned me as a subscriber.
impressed by your videos extremely smooth and deep explanation...... keep it up!
You are the best keep this way you will have millions of views so easy to learn with you
Thanks for sharing your knowledge! Looking forward to your next video :P
I love this man. Thank you!!!!
Keep pushing out these contents and you're heading for 1M subs
great illustration.Keep it up for the wonderful tutorial
You're awesome 🎉
Please make more videos and teach the hard parts of CSS.
Very cool and so adaptable for all builds. Mobile first all the way 😊 Thanks 👍
Thank you. Your contents are really helpful.
Wow, excellent, thanks again for sharing your knowledge.
thanks a lot! It helps me a lot
This is good and effective, explain something with good visual, i like it
Welcome back 🎉 great video
Best video on media query
thank you deeply from my soul for this video
Thanks for the video ❤
God!
The Way you explain things....... It just so mind blowing. You have a gift bro, I would seriouly want to learn or have a teacher with even half of your teaching skills.
You just got yourself a faithful Subscriber. Keep it up bro!!!1
Thank you much love ❤️
You really make coding looks so easy and fun! definitely worth watching every videos of yours! so educational and good for beginners :)) I hope you upload more content
you are doing great bro keep going
another awesome guide STD!! please make more !! HTML and CSS!!
amazing work bro really learned everything clearly💯💯
This guy is actually good
Exceptional video! Could you please make an in depth video about margins, paddings and borders, and in that video also go in depth about nitty gritty stuff like the consequence you've talked about at 8:10? There are many videos about this out there, but none go in depth about the relations and consequences of these properties.
Good suggestion ❤️
Could you make a video talking about the differences between normal CSS and tailwind , as well as how much of a difference using JavaScript can make
just AMAZING.
Your video concept is awesome. It very helps full for m. Take love from Bangladesh💖💖, Love you brother. Create this type of video regularly
Salute to you sir, helped a ton
Thanks !! :) amazing video :)
Waiting for this!❤❤
Bro please make a full css course with all animations and all please
very useful video, thank you.
You are a CSS magician
you make great videos bro
I love your teaching your good. Other mentors just type the code you can't even know how. It functions
You're back!
YOU'RE SO BASED
I subscribe your channel right now
I love the way that's you teaching
Please make separate playlists of all
HTML5 CSS3 and JAVASCRIPT and it's frame works and it's different small projects
Superv explanation!
Great explanation as always! btw do you use any extension when you apply media query your dev tools use colors to specify it?
Thanks! No I'm not using any extensions, it's all features you can activate on Chrome's dev tools
Display grid or flex with a bit of clamp() will cover most things you are talked about. I am not saying the media query is completely out of the picture though.
You then have @container queries which are way better than @media, but not 100% supported till about September of this year.
Yes, stuff like bootstrap and tailwind have to go with @media since they have to be for almost any site out there. They generally are not custom sites though.
You could use clamp for responsive sizing .. saves a lot of lines of code
How does clamp work?
nice video, thks for sharing ! 😘
Earned a subscriber today...❤❤❤
Great video
A Damn good video... this is a damn good video
Best video about media queries my friend ...you should upload more content
Thank you !!
I love the intro 😂
blessing thats all i can say
Waiting for more videos ☺️☺️
What software are u using to directly switch and view the different breakpoints of your media queries ?
what extension did you use for manually adjusting the screen resolution for your website?
Thanks for this great video! Your tutorials are dope! Can you tell me how you got the option to see the dimensions of the screen (top of the screen) without the rest of the Google Dev Tools windows? It would be nice to have an objective preview of the sizes of my screen without the rest of the Dev Tools screwing up my layout preview.
Also, how did you manage to add those media queries to your browser at 6:09?
Keep up the lifesaving work!🤟
Thanks !
Q1: Can you tell me how you got the option to see the dimensions of the screen (top of the screen) without the rest of the Google Dev Tools window?
A: You can change how the developer tools are opened. I'm assuming your dev tools are opening straight up in your browser, however mine open on a separate window. To do this, you can click on the 3 dots towards the right side of the developer tools, you will find a dock side setting with 4 possible options. If you set your dock side option to "Undock into separate window" your developer tools will now open on a separate window. With this option setup, you will be able to use the mobile view of the developer tools without the actual developer tools interfering with the viewport.
-
Q2: How did you manage to add those media queries to your browser at 6:09?
A: If you look at 6:09 you'll see 3 dots on the top right corner. Clicking on those dots will give you the option to show media queries - just select that option and you'll see the media queries show up like they do on the video :p
-
Hope this helped !
@@slayingthedragon Thanks, it really helped! I hope you will release a more in-depth tutorial about using these utility classes you mentioned for responsive design. I think they might solve many issues I have with the responsiveness of the website I am making.