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:

<link rel="stylesheet" media="screen and (min-width: 601px)" href="desktop.css" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css" />

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/

Answer 2

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 */
}

Answer 3

You can either load in another css file, (device.css) or just add it to the bottom of your css. Media queries control what css is used at which pixel width.

@media (max-width: 600px) { 
/* Insert Code Here */
}

will target anything under 600px

Answer 4

If you want to have only one css per page, but in that css file you want to import other css files that have differences based on screen size, you can do it like for example for screens less than 960px

@media screen and (max-width: 960px) 
{

/* your imports */
@import url('/css/styles1.css');
@import url('/css/styles2.css');

}

Also if you want to use only two css files in general, you might want to search for media queries and work on that a little :)

There are different methods for using different styles for different devices and screens, you might find this article useful about that http://css-tricks.com/resolution-specific-stylesheets/

Which says, e.g, you can specify in which screen size you want to show a css file like this;

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />