Can media queries resize based on a div element instead of the screen?

In CSS, media queries primarily adjust styles based on the characteristics of the entire viewport or screen, such as width, height, and resolution.

Media queries typically do not support applying styles based on the properties of individual HTML elements, such as divs.

In other words, we cannot directly use CSS media queries to detect the dimensions of a div element and adjust styles based on these properties.

However, we can achieve similar functionality using JavaScript.

With JavaScript, we can detect the dimensions of an element and dynamically adjust styles based on these dimensions. Below is a simple example:

Suppose we have a div, and we want to change its background color when its width is less than 500 pixels.

html
<div id="myDiv" style="width: 60%;">Content</div>

css
/* Default styles */
#myDiv {
    background-color: blue;
    transition: background-color 0.5s ease;
}

javascript
// JavaScript to detect width and apply styles
function adjustDivStyle() {
    var myDiv = document.getElementById('myDiv');
    var width = myDiv.offsetWidth; // Get the div's width

    if (width < 500) {
        myDiv.style.backgroundColor = 'red'; // Change background color to red if width is less than 500px
    } else {
        myDiv.style.backgroundColor = 'blue'; // Otherwise, blue
    }
}

// Add event listener
window.addEventListener('resize', adjustDivStyle);
adjustDivStyle(); // Run once on initialization

In this example, we use JavaScript's offsetWidth property to obtain the current width of the div and adjust the div's background color based on this width within an if condition. We also add an event listener to handle window resize events, ensuring that the div's styles update accordingly when the browser window size changes.

In summary, while CSS media queries do not inherently support adjusting styles based on HTML elements, we can leverage JavaScript to achieve similar effects.