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
0pnshow more

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
0pnshow more
Share on FacebookShare on TwitterShare on LinkedInSend email
Follow us on Facebook & Twitter
2022 AnswerTabsTermsContact us