CODEWITHSUNDEEP
htmlcss
Christian Burgos
Christian Burgos

Reputation: 1591

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

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.

Upvotes: 5

Views: 21811

Answers (4)

jk_
jk_

Reputation: 33

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

Upvotes: 1

Ekin
Ekin

Reputation: 1955

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

Upvotes: 16

Vincent
Vincent

Reputation: 81

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

Upvotes: 3

Buck
Buck

Reputation: 2074

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/

Upvotes: 13

Related Questions