xxxxxxxxxx
@media only screen and (max-width: 480px) and (min-width: 320px) {
/* mobile-devices */
.width {
background: var(--clr-grey);
}
}
@media only screen and (max-width: 768px) and (min-width: 481px) {
/* iPads, Tablets */
.width {
background: var(--clr-pink);
}
}
@media only screen and (max-width: 1024px) and (min-width: 769px) {
/* small screens, laptops */
.width {
background: var(--clr-yellow);
}
}
@media only screen and (min-width: 1024px) {
/* Desktops, large screens */
.width {
background: var(--clr-yellow);
}
}
xxxxxxxxxx
@media only screen and (max-width: 480px) and (min-width: 320px) {
/* mobile-devices */
}
@media only screen and (max-width: 768px) and (min-width: 481px) {
/* iPads, Tablets */
}
@media only screen and (max-width: 1024px) and (min-width: 769px) {
/* small screens, laptops */
}
@media only screen and (min-width: 1024px) {
/* Desktops, large screens */
}
xxxxxxxxxx
@media only screen and (max-width: 399px) { }
@media only screen and (min-width: 400px) and (max-width: 600px) { }
@media only screen and (min-width: 601px) { }
xxxxxxxxxx
@media only screen and (max-width: 600px) and (min-width: 400px) { }
xxxxxxxxxx
/* Media query for a range of device widths */
@media only screen and (min-width: <minimum-width>) and (max-width: <maximum-width>) {
/* CSS styles for devices within the specified width range */
/* Add your styles here */
}