How to Convert CSS Units with a Base Size and Viewport

Choose the right CSS unit conversion

CSS values can use different units for typography, spacing, and responsive layouts. This converter changes a numeric value from one supported CSS unit to another while taking the base size and viewport dimensions into account. That makes it useful when you need to compare values such as pixels, rem, em, percentages, vw, or physical units without doing the conversion by hand.

How to convert CSS units

1. Enter the numeric value you want to convert. If you leave it blank, the converter uses 16.
2. Select or enter the source unit, such as px, em, rem, %, vw, vh, pt, cm, mm, or in. The default source unit is px.
3. Select or enter the target unit. The default target unit is rem.
4. Set the base size when the conversion involves em, rem, or %. If you omit it, the base size is 16.
5. Set the viewport width or height when converting to or from vw or vh. The defaults are 1920 for width and 1080 for height.
6. Run the conversion and review the returned value. The converter first changes the input to pixels, then changes that pixel value into the target unit.

Use the base size that matches the CSS context you are working with. For example, a different base size changes how an rem value maps to pixels. For responsive units, use the viewport dimension relevant to the unit: width for vw and height for vh.

How to read the result

The result includes the converted value and the intermediate pixel value. Both are rounded to four decimal places after a successful conversion, so a small difference from a longer manual calculation can be rounding rather than a setup problem.

Relative units depend on the settings you provide. An em or rem source is multiplied by the base size; a percentage source uses the base size divided by 100; and vw or vh uses the corresponding viewport dimension. A target of em or rem divides the pixel value by the base size, while a percentage target expresses it as a percentage of that base size.

The physical units use fixed pixel factors: points use 1.33333 pixels per point, centimeters use 37.795 pixels per centimeter, millimeters use 3.7795 pixels per millimeter, and inches use 96 pixels per inch. If an exception occurs, the operation returns an unsuccessful result with the exception text instead of passing the exception through. A zero base size produces zero for em, rem, or percentage targets, and a zero relevant viewport dimension produces zero for vw or vh targets.

Worked example

A developer wants to confirm that a 16-pixel CSS value corresponds to one rem when the base size is 16.

Enter 16 as the value, use px as the source, use rem as the target, and set the base size to 16.

A successful result contains a converted value of 1.0000 and an intermediate pixel value of 16.0000, with both values rounded to four decimal places.

Limitations

• Unit labels are not handled as a universal rejection check: unrecognized labels follow the documented pixel pass-through behavior, while exceptions produce an unsuccessful result with exception text.

Common errors

• A typo in a unit label may not be rejected: labels are lowercased, an unrecognized source is treated as though its value were already in pixels, and an unrecognized target leaves the pixel value unchanged. Recheck both unit labels and use one of the supported units before relying on the result.

FAQ

What are the default CSS unit converter settings?

The default source unit is px, the default target unit is rem, and the default numeric value is 16. The base size defaults to 16, while the default viewport is 1920 by 1080.

Do base size and viewport dimensions change the conversion?

Yes, when the target is em, rem, or %, the base size affects the result. When the conversion uses vw or vh, the relevant viewport width or height affects it instead.

What happens if a conversion fails or the unit label is unrecognized?

The result is unsuccessful and includes the exception text if an exception occurs during conversion. An unrecognized unit label follows the converter's pixel pass-through behavior rather than being treated as a general validation rejection.