Convert PX to BASE UNIT

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

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

Base Unit  ↔︎  PX conversion table

Base Unit Px
18px
216px
324px
432px
540px
648px
756px
864px
972px
1080px
1188px
1296px
13104px
14112px
15120px
16128px
17136px
18144px
19152px
20160px
21168px
22176px
23184px
24192px
25200px
26208px
27216px
28224px
29232px
30240px
31248px
32256px
33264px
34272px
35280px
36288px
37296px
38304px
39312px
40320px
41328px
42336px
43344px
44352px
45360px
46368px
47376px
48384px
49392px
50400px
Px Base Unit
1px0.125
2px0.25
3px0.375
4px0.5
5px0.625
6px0.75
7px0.875
8px1
9px1.125
10px1.25
11px1.375
12px1.5
13px1.625
14px1.75
15px1.875
16px2
17px2.125
18px2.25
19px2.375
20px2.5
21px2.625
22px2.75
23px2.875
24px3
25px3.125
26px3.25
27px3.375
28px3.5
29px3.625
30px3.75
31px3.875
32px4
33px4.125
34px4.25
35px4.375
36px4.5
37px4.625
38px4.75
39px4.875
40px5
41px5.125
42px5.25
43px5.375
44px5.5
45px5.625
46px5.75
47px5.875
48px6
49px6.125
50px6.25

Advantages of BASE UNIT 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.

Maintenance

When you use "rem" units, you can maintain a more consistent and predictable sizing system throughout your CSS. This can make it easier to manage and update your styles, as changes to the root font size will affect the entire design.

Flexibility

"rem" units provide more flexibility in terms of design. You can define font sizes, margins, padding, and other dimensions using "rem," which will respond to changes in font size settings. This can be particularly useful when working with complex layouts.

Future-Proofing

As web standards evolve and devices with varying screen resolutions become more common, using "rem" units can help ensure your design remains adaptable to different contexts.
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.