Calculate CSS3 percentage

Given that the reason for your question is the following:

to make my website suitable for all resolutions

It seems to me that you are embarking on the wrong path to achieve that goal.

First , because to make your website suitable for all resolutions, what is used are the Media Queries :

  

Added in CSS3, media queries let content presentation adapt to a specific range of output devices without having to change the content itself. It is what is called in English a responsive design, that is, that adapts to each device according to the size of the screen .

Second , because such a conversion would be complicated, since will always depend on the context in which the elements will be displayed .

However, to answer your question, the formula would be: elemento/contenedor :

For example, to convert an element of 250px into a container of 1000px :

250/1000 = 0.25 (o sea, 25%)

But if the container is 500px :

250/500 = 0.5 (o sea, 50%)

That is, it is a conversion that will depend always on the context. In other words, the conversion of an element of 250px would be equivalent to 25% in one context, 50% in another context, n% in n contexts.

For more details you can consult:

• CSS PX to Percentage
• How do I calculate percentage based on pixels for CSS conversion?

this method is the recommended one, with calc you can do calculations:

:root {
  --width-size1: 250px;
}

.one {
  width: calc(var(--width-size1) - 80%);
}

What if I assure you is that making a web suitable for all browsers is called responsive design, and for that case I recommend a bootstrap design pattern or a template based on that technology, since it will shorten the time much. design ... it would be interesting if you take it into consideration.

The data type "percentage" in CSS basically takes the length of its container or parent element .

In this order of ideas, a width of 250px will be equivalent to 25% if your container is 1000px, or 50% if the container is 500px wide.

Perhaps a unit of measure that can serve you more to adapt your width to all resolutions, is vw , which are the initials of viewport width or the width of the visible area.

1vw equals 1% of "the window", which can make it easier to adapt in many cases.

Finally you can check calc() , which does basic arithmetic operations to give a length.

Example: calc(50% + 200px)

calc () , a function of CSS3 with which we can perform calculations with measures, that is: addition, subtraction, multiplication and division by mixing percentages, pixels or any unit. In addition, it is compatible with all browsers.

/* Forma estándar de calc() */
width: calc([Cálculos]);
/* Forma según navegadores de calc() */
width: -webkit-calc([Cálculos]);
width: -moz-calc([Cálculos]);

See Here