if screen is lower than 800 run this CSS, else run this CSS

Question

I'm wondering if I somehow can create a if statement that if the screen is lower than 800 it runs mobile.css else runs another CSS file.

My idea is to create something like this:

if (screen.width <= 800) {
  run.this.css = "<link rel="stylesheet" type="text/css" href="mobile.css" />";
}
else {
  run.this.css = "<link rel="stylesheet" type="text/css" href="desktop.css" />";
}

you can simply use media queries. – Umesh Sehta Aug 26 '14 at 10:23 — Umesh Sehta, Aug 26 '14 at 10:23

score 9 · Accepted Answer · answered Aug 26 '14 at 10:24

Just use 1 CSS file and use media queries to override:

/* DESKTOP.CSS CODE HERE */

@media screen and (max-device-width: 800px) {
    /* MOBILE.CSS CODE HERE */
}

If you really want them in seperate CSS files you can do the following:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="mobile.css" />

Ganesh Jadhav · Answer 2 · 2014-08-26T10:33:50.223

Use media queries, like this:

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

What you are trying to achieve is called responsive design.
A complete tutorial of it is here: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Media queries tutorial: http://css-tricks.com/css-media-queries/

score 3 · Answer 3 · answered Aug 26 '14 at 10:29

3

Just follow the media queries in css. for e.g:

/* Media queries in css */
@media(max-width: 800px) {
    // for 800px screen
}
@media(min-width: 801px) {
    // for larger then 800px screen
}

answered Aug 26 '14 at 10:29

CodeBriefly

1,000
4
16
29

score 1 · Answer 4 · answered Aug 26 '14 at 11:01

Its advisable to use media query for responsive

/* MEDIA QUERY FOR MOBILE DEVICES **********/    
@media (max-width: 767px) {
}

But, if you are concern with performance issue and you want to load responsive code css only for mobile than you can use javascript for that.

<!-- mobile.css will load only if the resolution is less than 768 -->
if(screen.width<768)
{
    file = location.pathname.split( "/" ).pop();
    link = document.createElement( "link" );
    link.href = "mobile.css";
    link.type = "text/css";
    link.rel = "stylesheet";
    link.media = "screen,print";
    document.getElementsByTagName( "head" )[0].appendChild( link );
}

score 0 · Answer 5 · edited May 23 '17 at 11:43

0

Check this out: What does @media screen and (max-width: 1024px) mean in CSS?

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

Something like this can help.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 26 '14 at 10:24

Moozz

609
6
18

score 0 · Answer 6 · answered Aug 26 '14 at 10:39

In case you cannot use mediaqueries as everyone mention (for example if you need to support IE8), you could try something like this:

$(document).ready(function() {

    function adjustStyle(width) {
        width = parseInt(width);
        if (width < 480) {
            $("body").removeClass("c800 c600");
            $("body").addClass("c400");

        } else if ((width >= 481) && (width < 600)) {
            $("body").removeClass("c400 c800");
            $("body").addClass("c600");

        } else if ((width >= 601) && (width < 800)) {
            $("body").removeClass("c400 c600");
            $("body").addClass("c800");

        } else {
            $("body").removeClass("c800 c400 c600");

        }
    }

    $(function() {
        adjustStyle($(this).width());
        $(window).resize(function() {
            adjustStyle($(this).width());
        });
    });
});

Instead of load different stylesheets, this code add a class in the body tag, and then you can create 'fake' mediaqueries:

.container {width:900px}
.c800 .container {width:700px;}
.c600 .container {width:500px;}

That's a poor solution. For media queries in IE8, just use a polyfill, for example: https://github.com/scottjehl/Respond — thirtydot, Aug 26 '14 at 10:56
In my case, we need this solution because the polyfill doesn't work with Zope Plone. By the way, there could be several reasons because you can't use the polyfill (client requirements, for example). I wish I had this response a year ago, because sometimes you can't use the perfect solution... — Arkana, Aug 26 '14 at 11:56
I'm sorry, but it sounds like you didn't try hard enough to make a polyfill work. Sure, this works but there's no way this should be going on a new site. — thirtydot, Aug 26 '14 at 12:12

if screen is lower than 800 run this CSS, else run this CSS

6 Answers6