title: jQuery media queries for responsive site
body: <p>I want to create a website with 3 different jquery sliders. All the three sliders contain different pictures. I tried to use if and else but it didn't work. This is my code.</p>
  
  <p>js</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          if($(window).width() &gt; 786){                
              $('.bxslider').bxSlider({
                  auto: true,
                  autoControls: true
              });                
          }else $(window).width() &gt; 478){
              $('.bxslider').bxSlider({
                  auto: true,
                  autoControls: true
              }) ;               
          } else {
              $('.bxslider').bxSlider({
                  auto: true,
                  autoControls: true
              })  ;
          }
      });  
  &lt;/script&gt;
  </code></pre>
  
  <p>Html </p>
  
  <pre><code>&lt;ul class="bxslider foto"&gt;
      &lt;li&gt;&lt;img src="img/Hoofd.jpg"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/deviceGrootMobiel.jpg"/&gt;&lt;/li&gt;
  &lt;/ul&gt;  
  &lt;ul class="bxslider portret"&gt;
      &lt;li&gt;&lt;img src="img/portret.jpg"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/devicesGrootTablet.jpg"/&gt;&lt;/li&gt;
  &lt;/ul&gt;  
  &lt;ul class="bxslider vision"&gt;
      &lt;li&gt;&lt;img src="img/vision.jpg"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/devicesGrootLaptop.jpg"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>