Responsive Web Design with JavaScript and CSS

Responsive design makes web pages work on different screen sizes – phones, tablets, and desktops. CSS does most of the work; JavaScript can fill in the gaps. Both.

Understanding responsive design

Responsive web design adjusts a site’s layout to fit the screen size and orientation of the device. The aim is readable text and easy navigation without constant zooming, panning, or scrolling sideways.

The role of CSS

CSS handles most responsive layout through media queries – rules that apply only when certain conditions are met, like screen width or orientation.

Example – CSS media query:

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

@media screen and (min-width: 601px) {
    body {
        background-color: coral;
    }
}

This changes the page background colour based on screen width.

Fluid layouts with CSS

Fluid layouts use relative units – percentages, vw (viewport width), vh (viewport height) – instead of fixed pixels.

Example – fluid layout:

.container {
    width: 80%;
    margin: 0 auto;
}

.image {
    width: 100%;
    height: auto;
}

The role of JavaScript in responsive design

CSS covers most responsive behaviour. JavaScript is useful when you need to:

1. Change styles dynamically based on user interaction or other conditions.
2. Load resources selectively based on device capabilities or screen size.
3. Adjust the DOM to rearrange or resize content for different screens.

Example – JavaScript for dynamic styling:

window.addEventListener('resize', () => {
    if (window.innerWidth < 600) {
        document.body.style.backgroundColor = 'lightblue';
    } else {
        document.body.style.backgroundColor = 'coral';
    }
});

This changes the body background colour when the window is resized.

Responsive images

Images need to look good on all devices without slowing the page down.

HTML and CSS for responsive images:

<img src="small.jpg" alt="example" id="responsiveImage">

window.addEventListener('resize', () => {
    let image = document.getElementById('responsiveImage');
    if (window.innerWidth < 600) {
        image.src = 'small.jpg';
    } else {
        image.src = 'large.jpg';
    }
});

This swaps between a smaller and larger image depending on screen width.

Responsive typography

Font sizes should scale with the screen. Fixed pixel sizes often look wrong on smaller devices.

CSS for responsive typography:

body {
    font-size: calc(1em + 1vw);
}

This adjusts font size based on viewport width.

Handling menus and navigation

Navigation menus are a common responsive challenge, especially on mobile. JavaScript can toggle menus open and closed.

Example – responsive menu with JavaScript:

document.getElementById('menuToggle').addEventListener('click', () => {
    let menu = document.getElementById('menu');
    menu.classList.toggle('active');
});

#menu.active {
    display: block;
}

Testing and debugging

Test on multiple devices and browsers. Chrome DevTools can simulate different screen sizes, which helps catch layout problems early.

Start with a mobile-first approach and fluid CSS layouts. Add JavaScript only where CSS cannot do the job. That keeps things simpler and easier to maintain.