Calculates.app

PX to REM converter

px
rem
Calculation based on a root font-size of
pixel.

Conversion tables

PixelRem
1 px0.0625 rem
2 px0.125 rem
3 px0.1875 rem
4 px0.25 rem
5 px0.3125 rem
6 px0.375 rem
8 px0.5 rem
10 px0.625 rem
12 px0.75 rem
14 px0.875 rem
15 px0.9375 rem
16 px1 rem
18 px1.125 rem
20 px1.25 rem
24 px1.5 rem
25 px1.5625 rem
28 px1.75 rem
32 px2 rem
36 px2.25 rem
40 px2.5 rem
44 px2.75 rem
48 px3 rem
50 px3.125 rem
56 px3.5 rem
64 px4 rem
72 px4.5 rem
75 px4.6875 rem
80 px5 rem
90 px5.625 rem
RemPixel
1 rem16 px
2 rem32 px
3 rem48 px
4 rem64 px
5 rem80 px
6 rem96 px
8 rem128 px
10 rem160 px
12 rem192 px
14 rem224 px
15 rem240 px
16 rem256 px
18 rem288 px
20 rem320 px
24 rem384 px
25 rem400 px
28 rem448 px
32 rem512 px
36 rem576 px
40 rem640 px
44 rem704 px
48 rem768 px
50 rem800 px
56 rem896 px
64 rem1024 px
72 rem1152 px
75 rem1200 px
80 rem1280 px
90 rem1440 px

PX and REM

In web development, PX (Pixel) and REM (Root Em) are units used to specify spacing, font sizes, and other length measurements in CSS. Here is a brief explanation of both units:

PX (Pixel)

  • Definition: A pixel is the smallest unit of a digital image or display.
  • Usage: Specifying in pixels (px) is absolute, meaning the size is fixed and independent of other factors.
  • Example: font-size: 16px; sets the font size to 16 pixels.
  • Advantages: Easy to use and predictable, as they have a fixed size.
  • Disadvantages: Can appear differently on various devices and screen resolutions and is less flexible when adapting to different screen sizes.

REM (Root Em)

  • Definition: A REM unit is based on the font size of the root element (<html>).
  • Usage: Specifying in REM is relative to the font size of the root element, meaning changes to the root element's font size affect the size of all elements specified in REM.
  • Example: If the font size of the root element (<html>) is 16px, then 1rem equals 16px. font-size: 2rem; would be 32px in this case.
  • Advantages: Allows for consistent and flexible design, as changes to the root element's size automatically apply to all values specified in REM.
  • Disadvantages: Can be initially more complex to understand and use, especially when many nested elements are involved.

Comparison and Recommendation

  • Responsive Design: REM units are often better suited for responsive design as they can be easily scaled by adjusting the root font size.
  • Consistency: REM can lead to a more consistent user experience, especially on different screen sizes and resolutions.

Example

Here is a simple example to illustrate the difference:

html {
    font-size: 16px; /* Sets the base font size */
}

body {
    font-size: 1rem; /* 1rem equals 16px */
}

h1 {
    font-size: 2rem; /* 2rem equals 32px */
}

p {
    font-size: 16px; /* Fixed font size of 16px */
}