Channel | Publish Date | Thumbnail & View Count | Download Video |
---|---|---|---|
Publish Date not found | 0 Views |
Join the discord – https://discord.gg/Ccz9nQSfQB
You might be wondering why there is a chameleon in the thumbnail of this video.
A chameleon can change its color and pattern and adapt its appearance to its environment.
The Chameleon's ability to change its appearance quickly and seamlessly is a skill to be admired – and what I'm suggesting is that we should be more like the Chameleon when creating our responsive layouts.
The mobile-first predefined 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 predefined 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) {}
Utility class mobile container:
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
filling right: 0.5 rem;
}
/* xs */
@media (min width: 475px) {
.container {
maximum width: 475px;
}
}
/* sm */
@media (min width: 640px) {
.container {
maximum width: 640px;
}
}
/* md */
@media (min width: 768px) {
.container {
maximum width: 768px;
}
}
/* lg */
@media (min width: 1024px) {
.container {
maximum width: 1024px;
}
}
/* XL */
@media (min width: 1280px) {
.container {
maximum width: 1280px;
}
}
/* 2xl */
@media (min width: 1536px) {
.container {
maximum width: 1536px;
}
}
Desktop container utility class:
.container {
maximum width: 1536px;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
filling right: 0.5rem;
}
/* 2xl */
@media (max width: 1536px) {
.container {
maximum width: 1280px;
}
}
/* XL */
@media (max width: 1280px) {
.container {
maximum width: 1024px;
}
}
/* lg */
@media (max width: 1024px) {
.container {
maximum width: 768px;
}
}
/* md */
@media (max width: 768px) {
.container {
maximum width: 640px;
}
}
/* sm */
@media (max width: 640px) {
.container {
maximum width: 475px;
}
}
/* xs */
@media (max width: 475px) {
.container {
width: 100%;
}
}
Please take the opportunity to connect and share this video with your friends and family if you find it helpful.