A responsive logo can be achieved with CSS min() function — without involving any media query.
The CSS min() function calculates the minimum value from a set of given values, and that can be set as the width of the logo image. Values can be provided in different units.
/* set width of logo as the minimum of 200px & 50vw */
#logo-img {
width: min(50vw, 200px);
}
In the above example, the width of the logo will be set to 200px for larger screens. For smaller screen 50vw becomes less than 200px, so in that case width of image is set as 50% of the screen width.
CSS min() comparison function is an easy way to create a responsive header logo in HTML pages, without using media queries.
Browser Compatibility
CSS min() is available in all modern browsers.