Load Mobile CSS Only for Mobile, Desktop CSS Only for Desktop

Hi,

I have a responsive wordpress site.
In this site I have two CSS files.
style.css - for desktops
style-400 - for mobile devices

Now no matter what device used (mobile or desktop), it loads both of these CSS files. (I think so because Google PageSpeed Insights shows both of them loaded)

What I want to do is (one of the following):
01. Load style.css for desktops only, load style-400.css for mobile only.
or
02. Combine both CSS to one CSS (not sure if this is a good approach in terms of mobile page loading speed. Please advise)

Thanks

 

You can try something like:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="style-400.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="style.css" />

Code (markup):

Without <meta name="viewport" content="width=device-width, initial-scale=1"> it may not work well, so it's important to have it there.

 

Thanks for the reply. I tried your suggestion, but it still load both files.

 

I assumed that your style sheet had the right syntax. It probably doesn't. The thing is, it won't load one "link rel=" at a time. It will load both of them, but your style sheet was supposed to take care of the rest. In your style-400.css file you should have something that looks like:

@media (max-width: 400px) {

.mobile_css_goes_here {
}

}

Code (markup):

If it doesn't then the aforementioned "link rel="'s are not going to make a diddly squat of difference.

 

It's doing what it's supposed to do. It's a cascade; as the UA gets smaller, the @media queries come into play, overriding the selector rulesets as needed. Successive stylesheets should become smaller as fewer rules (generally) need to be changed at each step.

You do have your links in the wrong order*. Start with the larger screens and work your way down.

cheers,

gary

* Unless you developed your stylesheets in the wrong order, in which case, all bets are off. Two wrongs don't make a right; it takes three lefts. ~g

 

my question is, why you have to use 2 css files? just make it to single files. and make css logic condition using.. @media