title: Execute function based on screen size
body: <p>I need to execute a specific function based on screen size and screen size changes <strong>(Responsive)</strong></p>
  
  <p>So lets say I have 3 functions <em>(For Example)</em></p>
  
  <pre><code>function red() {
      $('div').css('background','#B60C0C')
      .text('Screen Size RED');
      console.log('RED');
  }
  
  function orange() {
      $('div').css('background','#EBAE10')
      .text('Screen Size ORANGE');
      console.log('ORANGE');
  }
  
  function green() {
      $('div').css('background','#83ba2b')
      .text('Screen Size GREEN');
      console.log('GREEN');
  }
  </code></pre>
  
  <p>I need to execute function green() when the screen width size 500px or lower</p>
  
  <p>And function orange() when the screen width size 501px to 850px</p>
  
  <p>And function red() when the screen width size 851px or higher</p>
  
  <p><img src="https://i.stack.imgur.com/my2zM.jpg" alt="enter image description here"></p>
  
  <p>I tried to use resize() but the problem is executing the function when resizing the browser for each pixel repeat executing the same function and this is a very bad way to perform</p>
  
  <p><strong>I need to execute the function when break the point of the screen width size</strong></p>
  
  <p>Ready to use code on jsfiddle <a href="http://jsfiddle.net/BaNRq/" rel="noreferrer">http://jsfiddle.net/BaNRq/</a></p>