It's really very simple to calculate width of web page in responsive web design. This tool allow us to calculate width in percentage from pixel. % to px conversion is important in responsive web design. Here just enter the width of child element in px and width of parent element in px and our tool will give you the actual result in percntage (%) form.


Total:
%

Responsive Web Design Calculator and Formula from px to %

In responsive web design, we require to use percentage width instead of using pixel width. While deciding the left, right width of web page or responsive fluid grid width of web page require to use in percentage with actual proportation from parent width. First decide the width of whole page then the inner element width.

Responsive Web Design width formula in percentage

The formula for deciding the width of each responsive fluid grid is given below:

(Width of Child Element / Width of Parent Element) * 100

Explanation of Responsive Web Design width formula in percentage

Let us consider the below image:

 Responsive Web Design Calculator Image

For the above Image, we can easily calculate each responsive fluid grid width from our calculator. Each width given below:

For Wrapper Style
.wrapper{width:960px;}
For Container Style
.container{width:93.75%;} /*----   (900/960)*100   ------*/
For Main Style
.main{width:72.22222222222221%;}  /*----   (650/900)*100   ------*/
For Side Style
.side{width:23.88888888888889%;}  /*----   (900/960)*100   ------*/

Now you can easily calculate width of your responsive web design using our responsive web design width calculator.

Comments