Using the screen resolution, output something

Question

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

  var f = function(){$('#t').text('Window Width: ' + window.innerWidth)};
f();
$(window).resize(function(){
  f();
});

</script>

<span id="t"></span>

So I have this script so I can find the screen size. I want to use the screen size to do this:

if screen size is 320px then do this(some code).

if screen size is 768px then do this(some code).

if screen size is more than 1200px then do this(some code).

How can this be achieved?

Answer 1

So I guess you want to do it like this:

var width = $(window).width();

if(width <= 320){
} else
if(width <= 768){
} else
if(width > 1200){
}

Answer 2

well for this media queries are best choice, check this link: CSS media queries: max-width OR max-height

you can do with jquery as well:

$(window).resize(function(){
  var width = $(this).width();
  if( width == 320){
    f1();
  }else if (width == 768){
    f2();
  }else if (width >= 1200){
    f3();
  }  
});