html - 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 that css file there is an argument that choose which css to import based on the screen size.

Another one of my goal is to lessen the css(maximum is 2, one for the framework like bootstrap and one for the css selector based on screensize) being loaded on a page to reduce load times.

I still have no codes for this yet as i do not know how to do it.

Answer 1

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' />