Hellow guys, Welcome to my website, and you are watching Master Media Queries And Responsive CSS Web Design Like a Chameleon!. and this vIdeo is uploaded by Slaying The Dragon at 2023-04-11T19:48:22-07:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | Master Media Queries And Responsive CSS Web Design Like a Chameleon! |
| Video Uploader | Video From Slaying The Dragon |
| Upload Date | This Video Uploaded At 12-04-2023 02:48:22 |
| Video Discription | 🚨🚨🚨 COURSES - https://slayingthedragon.io 🚨🚨🚨 Join the discord - https://discord.gg/Ccz9nQSfQB 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%; } } |
| Category | Science & Technology |
| Tags | responsive web design | responsive | media queries | media query | ramzi | container | utility class | css | front-end | slaying the dragon | desktop first | mobile first |
