Convert PX to REM

Convert all pixels (PX) values to REM in css file for CSS, SCSS, SASS and LESS.

Thanks a lot for using our tool, Please bookmark this URL for later use.

PX ↔︎ REM conversion table

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
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

Advantages of REM over PX

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 "rem" over "px" in your CSS.

Relative Sizing

"rem" stands for "root em," and it is a relative unit that is based on the font size of the root element.This means that when you set a size in "rem," it will be relative to the base font size, making it adaptable to changes in font size. This is particularly useful for creating responsive designs that can scale with user preferences.

Accessibility

Using "rem" units makes it easier to create accessible websites. Users with visual impairments can adjust their browser's font size, and your layout will respond accordingly if you've used "rem" units consistently.

Easy to Scale

"rem" units can be scaled up or down globally by changing the font size on the root element. This can help in creating a consistent and scalable design without having to manually adjust every element size.

While "rem" has several advantages, it's important to note that there are scenarios where "px" may still be appropriate, such as when you need to create fixed-size elements that should not change based on font settings. Additionally, it's common to use a combination of both "rem" and "px" units in a CSS stylesheet to take advantage of the benefits of each in different parts of the design.