Which two units make the size of an element responsive to screen size?

The two units that make the size of an element responsive to screen size are vmin (viewport minimum) and vmax (viewport maximum).

Understanding Viewport Units for Responsive Design

In the realm of web development, creating a responsive design means ensuring that web pages look good and function well across various devices and screen sizes. CSS provides several units to achieve this, with vmin and vmax being particularly powerful for scaling elements relative to the overall viewport dimensions.

What are `vmin` and `vmax`?

vmin (Viewport Minimum): This unit represents 1% of the smaller dimension of the viewport (either height or width). For instance, if the viewport is 1000px wide and 800px high, 1vmin would be 8px (1% of 800px).
vmax (Viewport Maximum): This unit represents 1% of the larger dimension of the viewport (either height or width). Using the same example (1000px wide, 800px high), 1vmax would be 10px (1% of 1000px).

These units are intrinsically linked to the current size of the user's browser window or device screen. As the viewport changes size (e.g., rotating a phone from portrait to landscape, or resizing a browser window on a desktop), the calculated values of vmin and vmax adjust accordingly, making elements sized with these units inherently responsive.

How `vmin` and `vmax` Drive Responsiveness

The power of vmin and vmax lies in their adaptability. They allow developers to define sizes that scale proportionally, ensuring content remains legible and aesthetically pleasing on both very wide and very narrow screens.

Consider a scenario where you want a hero image or a main title to always take up a certain visual proportion of the screen, regardless of whether the user is on a desktop or a mobile device.

Using vmin for font sizes or container widths ensures that text or elements shrink on smaller screens but don't become excessively large on very wide screens if the height is the limiting factor. It's especially useful for elements that need to remain visible without horizontal scrolling on the smallest dimension.
Using vmax can be effective when you want an element to scale up aggressively on larger screens, ensuring it fills a significant portion of the available space, even if the viewport is disproportionately tall or wide.

Practical Applications and Examples

vmin and vmax are excellent for scenarios where you need global scaling based on the overall screen size.

Example: Responsive Font Size

Let's say you want a heading that always takes up a significant, but not overwhelming, portion of the screen.

h1 {
    font-size: 8vmin; /* Font size will be 8% of the smaller viewport dimension */
    text-align: center;
}

.hero-section {
    width: 90vw; /* 90% of viewport width */
    height: 60vh; /* 60% of viewport height */
    background-color: #f0f0f0;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

In this example, the h1 font-size will adjust based on the vmin value. If the screen is 1000px wide by 600px tall, 1vmin is 6px, so 8vmin becomes 48px. If the screen is 400px wide by 800px tall, 1vmin is 4px, so 8vmin becomes 32px. This ensures the text is always a readable and visually appropriate size relative to the screen.

Example: Dynamic Element Sizing

You can use vmin and vmax to size elements like circles or squares that should maintain their shape and scale with the screen.

.responsive-circle {
    width: 25vmin;  /* Width is 25% of the smaller viewport dimension */
    height: 25vmin; /* Height is 25% of the smaller viewport dimension */
    border-radius: 50%;
    background-color: steelblue;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3vmin;
}

This circle will always be perfectly round and scale down beautifully on smaller screens, never becoming too large or too small to be out of proportion with the viewport's narrowest side.

Comparison with Other Responsive Units

While vmin and vmax are highly effective, it's helpful to understand them in context with other viewport units:

Unit	Description	Primary Use Case
`vw`	1% of the viewport's width	Elements that should scale purely based on width, like full-width banners.
`vh`	1% of the viewport's height	Elements that should scale purely based on height, like hero sections.
`vmin`	1% of the smaller viewport dimension (width or height)	Ensuring elements never overflow the smaller dimension, good for font sizes.
`vmax`	1% of the larger viewport dimension (width or height)	Ensuring elements expand to fill significant space on larger, diverse screens.
`%`	Percentage of the parent element's size	Relative sizing within a specific container.
`em`	Relative to the font-size of the element (or its parent)	Contextual scaling for text and related elements.
`rem`	Relative to the font-size of the root element (`<html>`)	Global scaling for consistent typography and spacing.

For comprehensive information on CSS units, refer to resources like MDN Web Docs on CSS Values and Units or CSS-Tricks on Viewport Units.

Key Benefits of Using `vmin` and `vmax`

True Responsiveness: Elements scale directly with the browser viewport, not just parent elements.
Predictable Scaling: Provides a consistent visual ratio, whether the screen is tall, wide, or square.
Simplified Media Queries: Can reduce the need for extensive media queries for basic scaling, allowing a single value to work across a range of screen sizes.
Enhanced User Experience: Ensures content remains readable and accessible without manual zooming or excessive scrolling on various devices.

By leveraging vmin and vmax, developers can create more robust and adaptable designs that naturally adjust to the myriad screen sizes available today.