CODEWITHSUNDEEP
javascripthtmlcss
Vincent James
Vincent James

Reputation: 1148

Apply styles based upon javascript condition

I have two separate <style> tags which both contain a large number of styles and media queries. The first set of styles is applied for desktop viewers, the other set is applied for mobile viewers. When both sets of media queries run, it messes up the display because different components are visible at different sizes. I had been dynamically linking style sheets based upon the user display, but I have been asked to do it all on one page with no additional file loading. Is there any way I can apply one set of styles or the other exclusively via javascript?

Upvotes: 1

Views: 320

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24703

You can link it within your CSS links

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

Upvotes: 1

Halcyon
Halcyon

Reputation: 57729

You can do a mobile detection in JavaScript then add a class depending on which styles you want. ie. 

<body>
  <div class="mobile">
    .. your page ..
  </div>
</body>

or

<body>
  <div class="desktop">
    .. your page ..
  </div>
</body>

Upvotes: 1

Related Questions