Master Media Queries And Responsive CSS Web Design Like a Chameleon!

Published: 11 April 2023
on channel: Slaying The Dragon

495,564

14k

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%;
}
}

On this page of the site you can watch the video online Master Media Queries And Responsive CSS Web Design Like a Chameleon! with a duration of hours minute second in good quality, which was uploaded by the user Slaying The Dragon 11 April 2023, share the link with friends and acquaintances, this video has already been watched 495,564 times on youtube and it was liked by 14 thousand viewers. Enjoy your viewing!

2,689