CLAMPLI

clamp(50px, 33.333px + 5.208vw, 100px)

The CSS clamp() function allows you to create responsive values that adapt to the user's screen size without relying on media queries. It takes three values:

Clamp() Function

clamp(min, preferred, max)

• min: the smallest value allowed (e.g., 16px)
• preferred: the fluid value, often based on vw
• max: the largest value allowed (e.g., 24px)

As the viewport changes, the preferred value adjusts, but it never goes below the min or above the max.

Responsive design often means juggling multiple breakpoints with media queries to scale font sizes, spacing, and layout elements. clamp() simplifies this by:

• Automatically adjusting sizes fluidly between a defined range
• Reducing or eliminating the need for media queries
• Keeping your CSS cleaner and easier to maintain

Example

css

font-size: clamp(16px, 2vw, 24px);

This means:

• The text will never be smaller than 16px
• It will grow based on 2vw as the screen gets larger
• But it will never exceed 24px

You can use clamp() for font sizes, padding, margins, widths, and more. Making it a powerful tool for responsive design.

.//CLAMPLI helps you generate the ideal clamp() value based on your design needs. No math and no guesswork.

1. Set Your Viewport Range

Tell .//CLAMPLI the screen sizes you want to support:

• Minimum Size: the smallest screen size (e.g., 320px)
• Maximum Size: the largest screen size (e.g., 1280px)

This defines the range over which your value will scale fluidly.

2. Set Your Size Range

Next, enter the desired size range:

• Minimum Size: the smallest your font or element should be (e.g., 16px)
• Maximum Size: the largest it should scale to (e.g., 24px)

.//CLAMPLI will calculate a responsive formula that smoothly interpolates between these sizes based on the screen width.

3. Get Your clamp() Value

.//CLAMPLI will automatically output the CSS clamp() function you can copy and paste into your code.

Example output:

css

font-size: clamp(16px, 1.5vw + 1rem, 24px);