CSS media queries in JavaScript
CSS media queries in JavaScript
Join the DZone community and get the full member experience.
Join For FreeLearn how Crafter’s Git-based content management system is reinventing modern digital experiences.
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:
Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.
Like This Article? Read More From DZone
Published at DZone with permission of Sagar Ganatra , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}