XQA
Back to JavaScript
2026-01-236 min read

Responsive Design (JavaScript)

Learn Responsive Design (JavaScript) step by step with clear examples and exercises.

Why This Matters

In today's digital world, it is essential to create web applications that adapt seamlessly to various devices and screen sizes. Responsive design using JavaScript plays a crucial role in achieving this goal by providing dynamic adjustments to layout, content, and functionality based on user agents and viewport dimensions. A well-crafted responsive design ensures an optimal user experience across different platforms, enhancing engagement and conversion rates.

Prerequisites

Before diving into JavaScript responsive design, it is essential to have a solid understanding of the following:

  1. HTML & CSS basics (including Flexbox and Grid)
  2. JavaScript fundamentals (variables, functions, loops, conditional statements, and DOM manipulation)
  3. Event handling and event listeners
  4. Understanding the concept of viewport
  5. Basic understanding of CSS media queries

Core Concept

Media Queries

Media queries are a key component of responsive design that allows us to apply different styles based on specific conditions such as screen width, height, device type, orientation, and more. They are defined within CSS using the @media rule.

@media only screen and (max-width: 600px) {
/* Styles for screens with a maximum width of 600 pixels */
}

JavaScript and Media Queries

JavaScript can be used to create dynamic media queries by manipulating the DOM to change the CSS based on user interactions or other conditions. This is achieved using the matchMedia() function, which checks if a given media query matches the current viewport.

const mediaQuery = window.matchMedia('(max-width: 600px)');
mediaQuery.addListener((event) => {
if (event.matches) {
// Apply styles for screens with a maximum width of 600 pixels
} else {
// Remove styles for screens with a maximum width of 600 pixels
}
});

Responsive Layouts

Responsive layouts can be achieved using CSS Flexbox, Grid, or JavaScript. In this tutorial, we will focus on using JavaScript to create responsive layouts that adjust based on media queries.

Worked Example

Let's create a simple responsive design that adjusts the layout of a portfolio page based on screen size. We will have three sections representing different projects, with the first two sections displayed side by side on larger screens and stacked vertically on smaller screens.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design with JavaScript</title>
<style>
.container {
display: flex;
justify-content: space-between;
width: 100%;
}

@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<section id="projectA">Project A</section>
<section id="projectB">Project B</section>
<section id="projectC">Project C</section>
</div>

<script>
const mediaQuery = window.matchMedia('(max-width: 600px)');
mediaQuery.addListener((event) => {
if (event.matches) {
document.querySelector('.container').classList.add('stacked');
} else {
document.querySelector('.container').classList.remove('stacked');
}
});

// Initialize layout for larger screens
mediaQuery.matchMedia('(min-width: 600px)').matches && document.querySelector('.container').classList.remove('stacked');
</script>
</body>
</html>

In the example above, we have added a CSS class stacked to the container div when the media query matches (i.e., on screens with a maximum width of 600 pixels). This class changes the flex-direction property of the container from row to column, causing the projects to stack vertically instead of being side by side.

Common Mistakes

  1. Forgetting to initialize media queries for larger screens: Always ensure that you initialize the layout for larger screens when the media query does not match (i.e., on screens wider than your specified breakpoint).
  2. Ignoring browser compatibility: Not all browsers support certain media query features, so it's essential to test your responsive designs across various browsers and devices.
  3. Overcomplicating media queries: Keep media queries simple and specific to avoid performance issues and maintain readability.
  4. Not testing responsiveness thoroughly: Always test your design on multiple devices and screen sizes to ensure a consistent user experience.
  5. Ignoring JavaScript errors: Make sure to handle JavaScript errors gracefully and provide fallback styles for when JavaScript is not available or functional.
  6. ### Common Mistakes (subheadings)
  • Forgetting to initialize media queries for larger screens
  • Ignoring browser compatibility
  • Overcomplicating media queries
  • Not testing responsiveness thoroughly
  • Ignoring JavaScript errors
  1. Not using proper unit measurements: Always use relative units like rem or vw instead of fixed units like pixels to ensure that your design scales correctly across different devices.
  2. ### Common Mistakes (subheadings)
  • Not using proper unit measurements
  1. Not optimizing JavaScript code: Minimize the amount of JavaScript used in your responsive designs and make sure to minify and compress your scripts for faster load times.
  2. ### Common Mistakes (subheadings)
  • Not optimizing JavaScript code

Practice Questions

  1. Write a media query that applies a different background color to the body element on screens with a width between 320px and 480px.
@media only screen and (min-width: 320px) and (max-width: 480px) {
body {
background-color: #f5f5dc;
}
}
  1. Create a responsive design that adjusts the font size of headings based on screen width, using JavaScript and media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Sizes</title>
<style>
h1 { font-size: 2rem; }
</style>
</head>
<body>
<h1 id="header">Header</h1>

<script>
const mediaQuery = window.matchMedia('(max-width: 600px)');
mediaQuery.addListener((event) => {
if (event.matches) {
document.querySelector('#header').style.fontSize = '1.5rem';
} else {
document.querySelector('#header').style.fontSize = '2rem';
}
});
</script>
</body>
</html>
  1. Modify the worked example to create a responsive navigation menu that collapses into a hamburger icon on smaller screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
<style>
nav { display: flex; justify-content: space-between; align-items: center; }
nav .menu-icon { display: none; }
nav .menu-icon:hover, nav .menu-icon.active { display: block; }
nav ul { display: flex; list-style: none; }
nav ul li { margin: 0 1rem; }
nav ul li a { text-decoration: none; color: #333; }
@media only screen and (max-width: 600px) {
nav .menu-icon { display: block; }
nav ul { position: absolute; top: 100%; left: 0; width: 100%; height: 0; overflow: hidden; transition: all 0.3s ease-out; }
nav.active ul { height: auto; }
}
</style>
</head>
<body>
<nav id="nav">
<div class="menu-icon" onclick="toggleNav()">&#9776;</div>
<ul id="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<script>
let navActive = false;
function toggleNav() {
navActive = !navActive;
document.querySelector('#nav').classList.toggle('active');
}
</script>
</body>
</html>

FAQ

  1. Why should I use JavaScript for responsive design instead of only CSS? While CSS is essential for creating basic responsive designs, JavaScript allows for more dynamic adjustments based on user interactions and real-time conditions.
  2. How can I test my responsive design across multiple devices and screen sizes? Use browser developer tools to resize the viewport or use online testing tools like Responsinator and Am I Responsive?.
  3. What are some best practices for writing media queries in CSS? Keep media queries simple, specific, and avoid using complex selectors. Use logical operators (and, not) to combine conditions and minimize the number of media queries per page.
  4. How can I optimize JavaScript code for responsive designs? Minimize the amount of JavaScript used in your responsive designs and make sure to minify and compress your scripts for faster load times.
  5. What are some common mistakes to avoid when creating a responsive design? Avoid using fixed units like pixels, overcomplicating media queries, ignoring browser compatibility, not testing responsiveness thoroughly, and ignoring JavaScript errors.
  6. ### FAQ (subheadings)
  • Why should I use JavaScript for responsive design instead of only CSS?
  • How can I test my responsive design across multiple devices and screen sizes?
  • What are some best practices for writing media queries in CSS?
  • How can I optimize JavaScript code for responsive designs?
  • What are some common mistakes to avoid when creating a responsive design?
Responsive Design (JavaScript) | JavaScript | XQA Learn