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

If you're going for responsive design, you should go mainly off of screen width, not a specific screen height and width. Try googling "media queries conditionally load css" and will come up with a lot of examples. The gist is:

Only one of those will ever load. http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

Don't use @import. It will slow your page down. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/