×

Welcome to TagMyCode

Please login or create account to add a snippet.
1
0
 
0
Language: Javascript
Posted by: Srinivasan Pusuluri
Added: May 29, 2014 11:34 AM
Modified: May 30, 2014 3:01 AM
Views: 38
Changing CSS files based on device resolution
  1. <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
  2.  
  3. OR
  4.  
  5. <link rel="stylesheet" type="text/css" href="main.css" />
  6. <link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />
  7.  
  8.  
  9.  
  10. function adjustStyle(width) {
  11.     width = parseInt(width);
  12.     if (width < 701) {
  13.         $("#size-stylesheet").attr("href", "css/narrow.css");
  14.     } else if ((width >= 701) && (width < 900)) {
  15.         $("#size-stylesheet").attr("href", "css/medium.css");
  16.     } else {
  17.        $("#size-stylesheet").attr("href", "css/wide.css");
  18.     }
  19. }
  20.  
  21. $(function() {
  22.     adjustStyle($(this).width());
  23.     $(window).resize(function() {
  24.         adjustStyle($(this).width());
  25.     });
  26. });
  27.  
  28.