Skip to main content

CSS media queries in JavaScript

I like the media queries feature added to CSS 3, that allows web application developers or designers to define styling sheets for a range of output devices. A media query consists of a media type and one or more expressions that limits the style sheet scope. I was wondering if JavaScript can be used to update the elements in page, say changing the source attribute of an image based on the device width. Turns out there is a function matchMedia which accepts a media query string as input and returns the result.


Here's how it works:

if (window.matchMedia('only screen and (max-width: 480px)').matches) //do something
The matchMedia function accepts a media query string and returns an object of type MediaQueryList. The matches property returns a boolean value true if the document matches the media query list. I wrote a very simple page that changes the image source when the window is resized, here's the code:

<!DOCTYPE HTML> <html> <head> <script> function onresize(event){ var deviceImage = document.getElementById('device-image'); //device is a phone if (window.matchMedia('only screen and (max-width: 480px)').matches) { deviceImage.src = "phone.png"; } //device is a tablet else if (window.matchMedia('only screen and (min-width: 481px) and (max-width: 1024px)').matches) { deviceImage.src = "tablet.png"; } //device is a notebook else { deviceImage.src = "notebook.png"; } } //change the image when window is resized window.addEventListener('resize', onresize, false); //show the image based on the device width window.addEventListener('load',onresize,false); </script> </head> <body> Resize the window <div align="center"> <img id="device-image" src="notebook.png" /> </div> </body> </html>

Here I'm checking for the min-width and max-width properties and then based on these values I'm changing the source attribute of the image. Here's the working demo:


Labels:

Comments

  1. alkazamJuly 12, 2012 at 2:36 AM

    Doesn't work in Safari and Opera in Mac.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to use the APP_INITIALIZER token to hook into the Angular bootstrap process

I've been building applications using Angular as a framework of choice for more than a year and this post is not about another React vs Angular or the quirks of each framework. Honestly, I like Angular and every day I discover something new which makes development easier and makes me look like a guy who built something very complex in a matter of hours which would've taken a long time to put the correct architecture in place if I had chosen a different framework. The first thing that I learned in Angular is the use of the APP_INITIALIZER token.
Post a Comment
Read more

On GraphQL and building an application using React Apollo

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o...
Post a Comment
Read more

Using MobX to manage application state in a React application

I have been writing applications using React and Redux for quite some time now and thought of trying other state management solutions out there. It's not that I have faced any issues with Redux; however, I wanted to explore other approaches to state management. I recently came across MobX  and thought of giving it a try. The library uses the premise of  `Observables` to tie the application state with the view layer (React). It's also an implementation of the Flux pattern wherein it uses multiple stores to save the application state; each store referring to a particular entity. Redux, on the other hand, uses a single store with top-level state variables referring to various entities.
Post a Comment
Read more