How would you write media queries for multiple screen sizes?

Question

If i want

body {font-size:18 px} for 1900 and above

body {font-size:16 px} for 1024 and 1900

body {font-size:14 px}

Answer 1

Apply this code.

@media only screen and (max-width:319px)  { body{font-size:11px}}
@media only screen and (min-width:320px) and (max-width:767px)  { body{font-size:12px} }
@media only screen and (min-width:768px) and (max-width:1023px)  { body{font-size:14px} }
@media only screen and (min-width:1024px) and (max-width:1899px) { body{font-size:16px} }
@media only screen and (min-width:1900px) { body{font-size:18px} }