CSS @Media min-width and max-width use together

I have a general CSS website design for devices with screen width over 650px and a specific web design for devices with screen width up to 650px. Now I plan to create also a specific design for devices with screen width over 1366px. Do you have experience with using min-width and max-width together ?

Hi,

To create a different web design for screens with higher resolution, for screens with medium resolution and for mobile device screens, you can use CSS @media min-width and max-width together. In your case, the code should look like:


@media screen and (min-width: 1367px) {
font-family: Arial;
font-size: 12pt;
width: 1000px;
}

@media screen and (max-width: 1366px) and (min-width: 651px) {
font-family: Arial;
font-size: 11pt;
width: 900px;
}

@media screen and (max-width: 650px) {
font-family: Arial;
font-size: 13pt;
width: 600px;
}