#frontendweb

However, I had no idea how to set one of these puppies up.  After a few tries, I discovered that setting up a JavaScript media query isn't all that different from setting up a regular CSS one, just different syntax.  

If you're itching to try this too but have no idea where to start, let me give you the basics on how these can work.

First, you need to use something to detect the browser size.  In jQuery, you can choose either the window or the document to monitor.

Next, you need to set your breakpoints and which direction those breakpoints are coming from using an if/else statement.  For example, you can specify that if a window or document size is less than 420 px in width or height, then the function you specified gets called.

Lastly, you want to bind the event handler to find out when to do what you want it to do.  I found that I could use the jQuery resize method in conjunction with the if/else statement to denote when to fire events for me.

That's about it.  Easy, right?

It is!  And the possibilities are endless of what you can do with these!

To prove it, I made a simple project to test these out.  All I wanted to see is if I could evoke a simple change in the browser (the colors change) whenever i got to a specified browser width.  You can see the end result here, but I'll explain what I did and how I did it.

I began by specifying in my checkWidth function that I wanted to watch the window width size and that the behavior I was wanting to change on the body container class.  Then I set my breakpoints at which each event was to happen.  (I discovered that I could avoid some repetition by using an else if statement with a range of widths to account for different sizes of screens, and then I set a default behavior in the else statement. Awesomeness.)

So that defined what I wanted to have changed and when, but I also needed to call the function when the document was ready (simple) and then have jQuery do some magic by paying attention to the screen size as the user played around with it.  When the .resize() method detects a breakpoint, it then knows what event to trigger.

Lastly, just as a check for myself, I put in some console.log notes to see when the events were happening.  (Although for my project this is pretty obvious, it never hurts to have that change noted.)  I chose this for my simple project, but I could have also easily added a separate event listener function to give me information about what was going on a bit more precisely as opposed to the dozens of console log messages that I received.  However, for this project, it seemed like more work than was necessary.