Convert all occurrences of px to rem for responsive design

user_16319779 0
Viewed 471

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?

css-units responsive-design css
2 Answers

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.

user_139314710

Regex shouldn't be used this way, but...

This function should work but the predicament you are in is usually a one time thing and I normally advise against using Regex in this manner. The function pxToRem():

  • Finds all occurrences of a number (even with a decimal) adjacent to the letters 'px'.
  • Then a replacer function takes the number part and divides it by 16
  • Next it suffixes the new number with 'rem' and replaces the old number and 'px'.

Usage

  • Open your stylesheet, select as much of the text you need to change and copy it.
  • Next, paste it on a blank .html or .js file.
  • Wrap the text in grave marks ``` on a QWERTY keyboard it's the key located upper left hand corner `~
  • Assign the string to a variable.
  • Copy and paste pxToRem() code to the same page.

let css = `.box {width: 32px; height: 16px; border: 6px; padding 2.5px;}`;

function pxToRem(CSSString) {
  const rgx = new RegExp(/(\d+\.?\d*)px/, 'g');
  return CSSString.replace(rgx, (match, n) => (n / 16) + 'rem');
}

console.log(pxToRem(css));

Keep in mind that rem are relative to the font-size set on :root/html and if that font-size happens to be absolute (like the default of 16px) then the styles with rem aren't responsive, but they have the potential to be responsive. If you use a vmin units all rem will react immediately to any changes to the viewport. This not for the faint of heart.

user_28132240
Related