Convert REM to PX
Convert all REM values to pixels (PX) in css file for CSS, SCSS, SASS and LESS.
Thanks a lot for using our tool, Please bookmark this URL for later use.REM ↔︎ PX conversion table
| Rem | Px |
|---|---|
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 3.5rem | 56px |
| 4rem | 64px |
| 4.5rem | 72px |
| 5rem | 80px |
| 5.5rem | 88px |
| 6rem | 96px |
| 6.5rem | 104px |
| 7rem | 112px |
| 7.5rem | 120px |
| 8rem | 128px |
| 8.5rem | 136px |
| 9rem | 144px |
| 9.5rem | 152px |
| 10rem | 160px |
| 10.5rem | 168px |
| 11rem | 176px |
| 11.5rem | 184px |
| 12rem | 192px |
| 12.5rem | 200px |
| 13rem | 208px |
| 13.5rem | 216px |
| 14rem | 224px |
| 14.5rem | 232px |
| 15rem | 240px |
| 15.5rem | 248px |
| 16rem | 256px |
| 16.5rem | 264px |
| 17rem | 272px |
| 17.5rem | 280px |
| 18rem | 288px |
| 18.5rem | 296px |
| 19rem | 304px |
| 19.5rem | 312px |
| 20rem | 320px |
| 20.5rem | 328px |
| 21rem | 336px |
| 21.5rem | 344px |
| 22rem | 352px |
| 22.5rem | 360px |
| PX | Rem |
|---|---|
| 1px | 0.063rem |
| 2px | 0.125rem |
| 4px | 0.25rem |
| 6px | 0.375rem |
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 88px | 5.5rem |
| 96px | 6rem |
| 104px | 6.5rem |
| 112px | 7rem |
| 120px | 7.5rem |
| 128px | 8rem |
| 136px | 8.5rem |
| 144px | 9rem |
| 152px | 9.5rem |
| 160px | 10rem |
| 168px | 10.5rem |
| 176px | 11rem |
| 184px | 11.5rem |
| 192px | 12rem |
| 200px | 12.5rem |
| 208px | 13rem |
| 216px | 13.5rem |
| 224px | 14rem |
| 232px | 14.5rem |
| 240px | 15rem |
| 248px | 15.5rem |
| 256px | 16rem |
| 264px | 16.5rem |
| 272px | 17rem |
| 280px | 17.5rem |
| 288px | 18rem |
| 296px | 18.5rem |
| 304px | 19rem |
| 312px | 19.5rem |
| 320px | 20rem |
| 328px | 20.5rem |
| 336px | 21rem |
| 344px | 21.5rem |
| 352px | 22rem |
| 360px | 22.5rem |
Advantages of PX over REM
In CSS, "rem" and "px" are both units of measurement used to define the size of elements on a web page, but they have different characteristics and use cases. Here are some advantages of using "px" over "rem" in your CSS.Absolute Control
One of the main advantages of using "px" is that it provides
absolute control over the size of elements.
Unlike "rem," which is relative to the root element's font size,
"px" values represent a fixed number of
pixels.
This makes "px" ideal for situations where precise control over
the size of elements is crucial, and you
want to ensure consistent dimensions
irrespective of the parent or ancestor elements.
Consistency Across Designs
When using "px," the size of elements remains consistent across
different parts of the design,
regardless of
the font size set at the root level. This can be advantageous in
scenarios where you want to maintain a
specific aesthetic
or design consistency throughout the website, especially when
working with detailed or pixel-perfect
layouts.
Legacy Browser Compatibility
"px" units have better compatibility with older browsers that
might not fully support newer CSS
features or
relative units like "rem." If you're working on a project that
requires support for a wide range of
browsers, using "px"
can be a more reliable option in terms of rendering consistency.
It's important to note that the choice between "px" and "rem"
depends on the specific requirements of
the project. While "px"
provides more absolute control, "rem" offers scalability and
adaptability. Modern web design often
involves a combination of both units,
with "px" for elements where fixed sizing is crucial and "rem"
for creating scalable, responsive
designs.