Làm chủ Media Queries và Thiết kế Web CSS Responsive như một con tắc kè hoa!

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

}

}