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.