Transition Pixel to Percent

Transition pixel to percent

You may have to use JavaScript to change the percentage value to pixels after it has been calculated. I think webkit reports dimensions in px regardless of how they were set when called via JavaScript.

Converting pixels into percentages using CSS

CSS's calc function is your friend:

.rect {
    width: calc(125px * 105%);
    height: calc(48px * 105%);
}

How do I calculate percentage based on pixels for CSS conversion?

It actually depends on the context where your elements live.
Always remember the simple formula target / context

I don't think you will find a converter since as I said, it depends on the context.

For example: to convert to percentage a 300px inside a 1000px container you would do

300/1000 = 0.3 which is 30%

If the 300px has a padding of 10px and you want to convert it, do apply the formula considering the 300px as your container (context). So

10/300 = 0.0333333333 which is 3.3333333% (keep the decimals)

For the font sizes, if you set the font-size to 100%, that will refer to 100% of the default font size of the browser, which is most probably 16px for the major browsers.
For an accurate reading on font-size check this: The font-size CSS property

CSS PX to Percentage

I hate to break it to you, but you're likely to have a few people rolling their eyes at you here.

A percentage is relative to whatever the parent container's size is. 50% means "half of the width of the parent". There is no "px-%" conversion, because one is a fixed value and the other is a flexible ratio. That's... kinda why you can't find any such thing.

How to transform percentage to pixels CSS for bottom parameter?

if it should be 66% of the height, try:

bottom: calc(66vh - 35px);

or if it should be 66% of the width, try:

bottom: calc(66vw - 35px);

---

Related Topics