The Potent Cocktail of Media Queries and JavaScript

Over time human beings have evolved, from homo erectus to sapien…then to sapien twice, from horse carts to roaring engines, and now to electric. I like to call it “moving with the times”, and that’s good. Let’s take a short glimpse back into the history of website, specifically scaling in reference to web pages.

Long ago, in a distant land…most websites were unimaginable on mobile devices, if people had invented 5” super AMOLED, gorilla glass, waterproof, everything-proof, do-everything-even launch-into-space mobile screen as those of today. If you were lucky enough to have one of those Fabergé eggs, viewing a website on your mobile phone was horrifying, Jason Voorhees kind of horrifying.

You had to scroll for miles before you could click the “add to cart” button or put your mobile in landscape orientation just to see the navbar. The dark days truly. However, as I said before, we are an evolved people and if such offences from web developers and designers today could earn them an execution.

So then, welcome everyone to media queries. They help you style your content rendering to adapt to certain conditions such as orientation, device, width and much more. That kind of power is lethal, you can design such aesthetic sites using this rules, and much more importantly…sites that can scale.

Now, the trick here comes when you need a jQuery or javascript function to work when a certain media query is true. That’s the big boys club, but I’ll give you a free ticket in. You can store your media query in a variable using the window.matchMedia() function and add some logic to your fancy.

I know…mind-juggling, go out there and create more adaptive, responsive and beautiful sites with this, the code is ever in your favour but for the ;…I’m not too sure.

Written on October 15, 2016