Free VMin & VMax Converters
Convert viewport-relative minimum (vmin) and maximum (vmax) coordinates into pixels
VMin & VMax Converters
Viewport Widthpx
Viewport Heightpx
VMin → PX
px1vmin = 10.8px
VMax → PX
px1vmax = 19.2px
PX → VMin
vmin1px = 0.0926vmin
PX → VMax
vmax1px = 0.0521vmax
Common Viewport Sizes:
Understanding VMin and VMax Units
VMin (viewport minimum) and VMax (viewport maximum) are CSS viewport-relative units that adapt based on the smaller or larger dimension of the viewport, making them incredibly useful for responsive design.
// VMin and VMax definitions
1vmin = 1% of viewport's smaller dimension
1vmax = 1% of viewport's larger dimension
// Example: Viewport 1920×1080px (landscape)
Smaller dimension: 1080px (height)
Larger dimension: 1920px (width)
1vmin = 1% of 1080px = 10.8px
1vmax = 1% of 1920px = 19.2px
1vmin = 1% of viewport's smaller dimension
1vmax = 1% of viewport's larger dimension
// Example: Viewport 1920×1080px (landscape)
Smaller dimension: 1080px (height)
Larger dimension: 1920px (width)
1vmin = 1% of 1080px = 10.8px
1vmax = 1% of 1920px = 19.2px
When to Use VMin vs VMax
| Unit | Best For | Use Case Example | Behavior on Rotation | Typical Values |
|---|---|---|---|---|
| VMin | Elements that should scale with smaller dimension | Font sizes, icons, buttons on mobile | Changes when device rotates | 2vmin-10vmin |
| VMax | Elements that should scale with larger dimension | Containers, hero sections, full-width elements | Stays consistent on rotation | 50vmax-100vmax |
| VW | Width-specific scaling | Horizontal layouts, sidebars | Changes on width resize only | 25vw-100vw |
| VH | Height-specific scaling | Full-screen sections, vertical spacing | Changes on height resize only | 50vh-100vh |
Conversion Formulas
// Conversion formulas
VMin to Pixels: px = (vmin ÷ 100) × min(width, height)
VMax to Pixels: px = (vmax ÷ 100) × max(width, height)
Pixels to VMin: vmin = (px ÷ min(width, height)) × 100
Pixels to VMax: vmax = (px ÷ max(width, height)) × 100
// Example calculations for 1920×1080 viewport
10vmin to px: (10 ÷ 100) × 1080 = 108px
10vmax to px: (10 ÷ 100) × 1920 = 192px
200px to vmin: (200 ÷ 1080) × 100 = 18.52vmin
200px to vmax: (200 ÷ 1920) × 100 = 10.42vmax
VMin to Pixels: px = (vmin ÷ 100) × min(width, height)
VMax to Pixels: px = (vmax ÷ 100) × max(width, height)
Pixels to VMin: vmin = (px ÷ min(width, height)) × 100
Pixels to VMax: vmax = (px ÷ max(width, height)) × 100
// Example calculations for 1920×1080 viewport
10vmin to px: (10 ÷ 100) × 1080 = 108px
10vmax to px: (10 ÷ 100) × 1920 = 192px
200px to vmin: (200 ÷ 1080) × 100 = 18.52vmin
200px to vmax: (200 ÷ 1920) × 100 = 10.42vmax
Practical Applications
Responsive Typography with VMin
Text that scales with smaller dimension:
font-size: 4vmin;• On mobile portrait: 4% of width
• On mobile landscape: 4% of height
• Always readable on any orientation
Perfect Circles with VMin
Create circles that stay circular on rotation:
.circle { width: 50vmin; height: 50vmin; border-radius: 50%;}CSS Implementation Examples
// Responsive font sizing that works on all devices
.responsive-heading {
font-size: clamp(1.5rem, 5vmin, 3rem);
/* Scales with smaller dimension, with min/max limits */
}
// Full-screen hero section that adapts to orientation
.hero-section {
width: 100vmax;
height: 100vmin;
background: linear-gradient(45deg, #667eea, #764ba2);
}
// Responsive spacing system
:root {
--space-unit: 2vmin;
--space-sm: calc(var(--space-unit) * 0.5);
--space-md: var(--space-unit);
--space-lg: calc(var(--space-unit) * 2);
--space-xl: calc(var(--space-unit) * 4);
}
// Aspect ratio containers
.square-container {
width: 80vmin;
height: 80vmin;
max-width: 500px;
max-height: 500px;
}
.responsive-heading {
font-size: clamp(1.5rem, 5vmin, 3rem);
/* Scales with smaller dimension, with min/max limits */
}
// Full-screen hero section that adapts to orientation
.hero-section {
width: 100vmax;
height: 100vmin;
background: linear-gradient(45deg, #667eea, #764ba2);
}
// Responsive spacing system
:root {
--space-unit: 2vmin;
--space-sm: calc(var(--space-unit) * 0.5);
--space-md: var(--space-unit);
--space-lg: calc(var(--space-unit) * 2);
--space-xl: calc(var(--space-unit) * 4);
}
// Aspect ratio containers
.square-container {
width: 80vmin;
height: 80vmin;
max-width: 500px;
max-height: 500px;
}
Device Rotation Behavior
// How units behave on device rotation (example: 375×667 mobile)
Portrait Orientation:
Width: 375px, Height: 667px
Smaller dimension: 375px (width)
Larger dimension: 667px (height)
10vmin = 37.5px (10% of 375px)
10vmax = 66.7px (10% of 667px)
Landscape Orientation:
Width: 667px, Height: 375px
Smaller dimension: 375px (height)
Larger dimension: 667px (width)
10vmin = 37.5px (10% of 375px)
10vmax = 66.7px (10% of 667px)
Key Insight: vmin stays consistent (37.5px), vmax stays consistent (66.7px)
Result: Elements sized with vmin maintain size on rotation
Portrait Orientation:
Width: 375px, Height: 667px
Smaller dimension: 375px (width)
Larger dimension: 667px (height)
10vmin = 37.5px (10% of 375px)
10vmax = 66.7px (10% of 667px)
Landscape Orientation:
Width: 667px, Height: 375px
Smaller dimension: 375px (height)
Larger dimension: 667px (width)
10vmin = 37.5px (10% of 375px)
10vmax = 66.7px (10% of 667px)
Key Insight: vmin stays consistent (37.5px), vmax stays consistent (66.7px)
Result: Elements sized with vmin maintain size on rotation
Best Practices
- Use vmin for typography to ensure readability on all orientations
- Use vmax for full-width/full-height elements
- Combine with clamp() to set minimum and maximum boundaries
- Test on both portrait and landscape orientations
- Consider accessibility - ensure text doesn't become too small
- Use CSS custom properties for maintainable responsive values
- Remember that vmin/vmax consider both dimensions, making them truly responsive
Common Use Cases
// Most common vmin/vmax applications
1. Responsive Typography: font-size: 4vmin;
2. Perfect Squares/Circles: width: 50vmin; height: 50vmin;
3. Full-screen Sections: height: 100vmin; width: 100vmax;
4. Responsive Padding/Margin: padding: 2vmin;
5. Aspect Ratio Maintenance: aspect-ratio: 1/1; width: 80vmin;
6. Icon Sizes: width: 8vmin; height: 8vmin;
7. Button Sizes: min-width: 20vmin; padding: 1vmin 3vmin;
8. Border Radius: border-radius: 2vmin;
1. Responsive Typography: font-size: 4vmin;
2. Perfect Squares/Circles: width: 50vmin; height: 50vmin;
3. Full-screen Sections: height: 100vmin; width: 100vmax;
4. Responsive Padding/Margin: padding: 2vmin;
5. Aspect Ratio Maintenance: aspect-ratio: 1/1; width: 80vmin;
6. Icon Sizes: width: 8vmin; height: 8vmin;
7. Button Sizes: min-width: 20vmin; padding: 1vmin 3vmin;
8. Border Radius: border-radius: 2vmin;
Comparison with Other Units
| Scenario | VW | VH | VMin | VMax | Best Choice |
|---|---|---|---|---|---|
| Mobile portrait text | Scales with width | Scales with height | Scales with width (smaller) | Scales with height (larger) | VMin (consistent on rotation) |
| Mobile landscape button | Scales with width | Scales with height | Scales with height (smaller) | Scales with width (larger) | VMin (consistent on rotation) |
| Full-width desktop hero | 100vw (full width) | 100vh (full height) | 100vmin (full smaller side) | 100vmax (full larger side) | VMax (truly full screen) |
| Square image container | Width-based only | Height-based only | Scales with smaller dimension | Scales with larger dimension | VMin (maintains square shape) |
| Fixed aspect ratio video | Width controls height | Height controls width | Scales proportionally | Scales proportionally | VMin/VMax + calc() |
Understanding VMin and VMax Viewport Units
Fluid web layouts must perform flawlessly whether the user holds their device vertically (portrait) or horizontally (landscape). The relative CSS units VMin and VMax address orientation changes gracefully:
- VMin dynamically evaluates to 1% of the smaller viewport dimension. On portrait mobile displays, vmin corresponds to the width; on landscape screens, it corresponds to the height.
- VMax dynamically evaluates to 1% of the larger viewport dimension (screen height on vertical views, width on horizontal views).
🔒
Privacy Pledge: All viewport math is computed client-side using local JavaScript algorithms. No screen coordinates or layouts are logged or shared externally.
The Mathematical Formulas
To compute absolute pixels, select the appropriate viewport dimension, divide by 100, and multiply by the VMin/VMax unit:
VMin to PX: PX = VMin × (min(Width, Height) ÷ 100)
VMax to PX: PX = VMax × (max(Width, Height) ÷ 100)
Suppose a layout applies 8vmin and 8vmax on a standard Full HD monitor (1920 × 1080px):
VMin: 8vmin × (1080px ÷ 100) = 8 × 10.8 = 86.4px
VMax: 8vmax × (1920px ÷ 100) = 8 × 19.2 = 153.6px
VMax: 8vmax × (1920px ÷ 100) = 8 × 19.2 = 153.6px
VMin vs. VMax Reference Chart (on 1920x1080px Viewport)
The table below maps common viewport percentages to absolute pixel sizes assuming standard desktop Full HD dimensions:
| Viewport Percent (%) | Result in VMin (1080px Base) | Result in VMax (1920px Base) |
|---|---|---|
| 1 % | 10.8 px | 19.2 px |
| 2 % | 21.6 px | 38.4 px |
| 5 % | 54.0 px | 96.0 px |
| 10 % | 108.0 px | 192.0 px |
| 25 % | 270.0 px | 480.0 px |
| 50 % | 540.0 px | 960.0 px |
| 100 % | 1080.0 px | 1920.0 px |
When to Choose VMin vs. VMax
Use VMin for styling interactive mobile menus, typography, user avatars, or UI buttons that should scale proportionally without spilling out when the smartphone is rotated. Use VMax for layout headers, full-screen slider wraps, decorative shapes, and backgrounds that must span the maximum display dimension at all times.
