@media query

by Kumar Sidharth

HTML

<div id="d1"></div>

CSS

#d1 {
    height: 400px;
    width: 275px;
    background-color: hotpink;
    display: grid;
    place-items: center;
}


@media (max-height: 550px) {
    #d1 {
        height: 400px;
        width: 275px;
        background-color: purple;
    }
}

@media (max-height: 500px) {
    #d1 {
        height: 400px;
        width: 275px;
        background-color: green;
    }
}

JavaScript

var d1 = document.getElementById('d1');
window.addEventListener('resize', () => d1.innerText = `${window.innerWidth} x ${window.innerHeight}`);