Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS media queries in JavaScript

DZone's Guide to

CSS media queries in JavaScript

· Web Dev Zone
Free Resource

Try RAD Studio for FREE!  It’s the fastest way to develop cross-platform Native Apps with flexible Cloud services and broad IoT connectivity. Start Your Trial Today!

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:

 

Get Your Apps to Customers 5X Faster with RAD Studio. Brought to you in partnership with Embarcadero.

Topics:

Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}