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 ?
posted on 07.09.2019 at 18:50
0pnshow 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;
}

posted on 09.09.2019 at 19:55
0pnshow more
TimTim
share on facebookshare on twitter
2019 AnswerTabsTermsContact us
This site uses cookies to improve your experience, for analytics and ads. By continuing to browse this site you agree to our use of cookies.