Px to Rem
So you've found cool code on Codepen and you want it for your site - but it's designed in pixels. Perhaps you've made your site in pixels in the past and want to update it to rem
Why use rem? So it looks good on all screens. A thing sized using the rem unit will scale up and down proportionally as the root unit scales up and down. Using the root unit means everything on the page will scale at the same rate. For something like the Thrift Shop clock, it's essential that the circles, numbers and clock hands stay in the same relationship to one another, no matter how the site is viewed. I developed this method to quickly convert the message from the vicar to be mobile and multi-screen friendly.
How to
Firstly: 1rem equals the font size of the html element, which for most browsers has a default value of 16px. If you intend to set a different root font size, do that first.
- Pick an important part of the layout: the width of the central box, for example, or the outline of a CSS picture.
- Note down how many pixels that width is.
- Use experimentation to find the size in rem that looks the same. Use the inspect tool or edit the CSS, changing the unit to anything in rem. Look at the website in the browser. Now make the number of rem smaller or larger until it looks correct
- You can now make a scale, by comparing the original number in px to the new number in rem
- Use the scale to convert each measurement in pixels to a measurement in rem. You can use find+replace to make this faster.
Make the scale
- x = original quantity in px
- y = new quantity in rem (desired outcome)
- sum: x/y = z
- The scale is 1/z
To convert a measurement
- Use this online scale converter. Choose the Scale Converter tool
- Input: Convert x cm in 1/1 scale to y cm in 1/z scale
- The outcome is in rem. In the CSS, replace the number in px with this number in rem.