how do i include css based on screen size of the device

Question

How do i include css based on the screen size of the devices for viewing web pages?

What i have in mind is that i will only include one css inside a page and inside

Answer 1

You can try this for different screes size to use different css style

/* min size style*/
@media screen and (max-width:320px) {
   /* put your css style in there */
}

/* middle size style */
@media screen and (min-width:321px) {
   /* put your css style in there */
}

/* large size style */
@media screen and (min-width:800px) {
   /* put your css style in there */
}