Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
​
   <style>
     .xs body {
       background:red;
     }
     .sm body {
       background:blue;
     }
     .md body {
       background:black;
     }
     .lg body {
       background:purple;
     }
  </style>
</head>
<body>
  
</body>
</html>
 
$(document).on('resize, ready', function() {
      // Add class if screen size equals
      var $window = $(window),
          $html = $('html');
​
      function resize() {
        if ($window.width() < 768) {
          return $html.addClass('xs');
        }
        else if ($window.width() > 768 && $window.width() < 992) {
          return $html.addClass('sm');
        }
        else if ($window.width() > 992 && $window.width() < 1200) {
          return $html.addClass('md');
        }
        else if ($window.width() > 1200) {
          return $html.addClass('lg');
        }
        $html.removeClass('xs sm md lg');
      }
      $window.resize(resize).trigger('resize');
​
    });
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers