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 ?
07 Sep 2019 at 06:50 PM
0give a positive ratinggive a negative ratingshow more
StorStor
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;
}

09 Sep 2019 at 07:55 PM
0give a positive ratinggive a negative ratingshow more
TimTim
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook
2022 AnswerTabsTermsContact us