JavaScript Detect Media Query Changes

Here’s a comprehensive tutorial on how to use JavaScript to detect media query changes. This technique is incredibly useful for creating responsive web applications that adapt seamlessly to different screen sizes and devices, allowing you to trigger specific JavaScript functions or update the UI based on the active media query.

Before diving into the code, let’s set up the basic HTML structure. This will create the visual elements we’ll be manipulating with JavaScript based on media query changes.

HTML Structure

Here’s the basic HTML to start with:

<div id="slides">
  <div class="slide active">
    <div class="slide__text"><span><span>getComputedStyle</span></span><span id="css"><span></span></span></div>
    <div class="slide__image" style="background:linear-gradient(90deg,#f5365c,#f56036)"></div>
  </div>
  <div class="slide">
    <div class="slide__text"><span><span>@media</span></span><span id="js"><span></span></span></div>
    <div class="slide__image" style="background:linear-gradient(90deg,#1171ef,#11cdef)"></div>
  </div>
</div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script  src="./script.js"></script>

Styling the Elements

Now, let’s add some CSS to style the HTML elements. This will help visualize the changes as media queries are triggered.

CSS Styling

Use the following CSS to style the elements:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font: 28px/1.8 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  color: white;
}

#slides {
  max-width: 20rem;
  width: 100%;
  height: 10rem;
  margin: auto;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 0;
  position: absolute;
  transition: z-index 1s ease;
}
.slide.active {
  z-index: 2;
  transition: z-index 1s ease;
}
.slide__text {
  z-index: 2;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: hidden;
}
.slide__text > span {
  display: block;
  overflow-y: hidden;
}
.slide__text > span > span {
  display: inline-block;
  transform: translate3d(0, 140%, 0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.82, 0, 0.12, 1), opacity 0.9s cubic-bezier(0.82, 0, 0.12, 1);
}
.slide__text > span > span:nth-child(1) {
  transition-delay: 0.15s;
}
.slide__text > span > span:nth-child(2) {
  transition-delay: 0.3s;
}
.active .slide__text > span > span {
  transform: translate3d(0, 0%, 0);
  opacity: 1;
  transition: transform 0.7s cubic-bezier(0.82, 0, 0.12, 1), opacity 0.2s ease;
}
.slide__text > span:nth-of-type(2n) span {
  transition-delay: 0.2s;
}
.slide__image {
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  transition: height 0.7s 0.7s cubic-bezier(0.82, 0, 0.12, 1);
}
.active .slide__image {
  height: 100%;
  transition: height 0.5s 0.3s cubic-bezier(0.82, 0, 0.12, 1);
}

#css span::after {
  content: "Desktop";
}
@media screen and (max-width: 1024px) {
  #css span::after {
    content: "Tablet Landscape";
  }
}
@media screen and (max-width: 768px) {
  #css span::after {
    content: "Tablet Portrait";
  }
}
@media screen and (max-width: 360px) {
  #css span::after {
    content: "Mobile";
  }
}

Implementing the JavaScript

This is the core part of the tutorial. We will use JavaScript to detect media query changes and update the content dynamically.

JavaScript Code

Add the following JavaScript code to handle media query detection:

const js = document.querySelector('#js span')
const all = document.querySelectorAll('.slide')
let index = 0

window.addEventListener('resize', onResize, false)

function onResize() {
	let content = window.getComputedStyle(document.querySelector('#css span'), '::after').getPropertyValue('content')
  if (content == '"Mobile"' || content == 'Mobile')
    js.innerHTML = 'Mobile'
  else if (content == '"Tablet Portrait"' || content == 'Tablet Portrait')
    js.innerHTML = 'Tablet Portrait'
  else if (content == '"Tablet Landscape"' || content == 'Tablet Landscape')
    js.innerHTML = 'Tablet Landscape'
  else if (content == '"Desktop"' || content == 'Desktop')
    js.innerHTML = 'Desktop'
}

onResize()

setInterval(function() {
  if( $('#slides .slide.active').index() == all.length-1 )
    index = 0
  else
    index++
  $('#slides .slide.active').removeClass('active')
  $('#slides .slide').eq(index).addClass('active')
}, 2E3)

Footer Assets

In conclusion, you’ve successfully created a mechanism to detect media query changes using JavaScript, enabling dynamic adaptation of your web application based on screen size.