Convert all occurrences of px to rem for responsive design

Issue

I am a noob web developer and made a big mistake.
I am creating a website for a college project, it needs to be responsive. I have tons of CSS written all in px units. But now for responsiveness, I want to convert all the px to rem. It would be a tiring task to do it one by one. Is there any tool that can help me?

Solution

I don’t know of any tool that would automatically change all px to rems but you can make the changes quickly if you do something like this:

body {
   font-size: 0.625rem; 
{

Now 1 rem will be equal to 10 px, if you use Vscode you can enter a shortcut Ctrl + F and choose a Use Regular Expression option in Find input.
Then you can type (\d*)?(\d).?(\d*)?px in Find field, and $1.$2$3rem in Replace field.
But be alert, this regex doesn’t work for sizes beginning with dot like .5px.

The search bar should look like this:
enter image description here

If you want to learn how this regular expression works click here.

Answered By – DGX37

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published