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.