CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

Formula Used to Create Percentage Values?

"target ÷ context = result"

Can anyone give a better example so i can get a clear understanding please?

Abraham Juliot
Abraham Juliot
47,339 Points

Width Of Child Element In px ÷ Width Of Parent Element In px = total %

I used this from the source below. After testing out some values, it clicked for me. I hope this helps.

http://rqrwd.com/ (really quick responsive web design tool)

1 Answer

Wayne Priestley
Wayne Priestley
19,567 Points

Hi Anthony,

I'll give you two examples as I'm not sure which one of the common two you wish to know about.

First is when you are figuring out grids or want a certain element to fill a certain width of the screen.
We will say we have set a body width of 900px,
We want an image to fill 3/4 of the screen.

target ÷ context = result

675px (3/4 of 900) is the target
900px (the body width is the context)

675 ÷ 900 = 0.75 (then you move the decimal 2 places to the right) 75%

Thats obviously an easy one that you don't need a calculator to know 75% is 3/4 of something, but pick another width, say body of 988px and you have an image of 342px and want a percentage width.

342 ÷ 988 = 0.3461 move x2 places = 34%

Second will be changing px to em units,
A font size of 27px to em,

target ÷ context = result
27 ÷ 16 (the usual default pixel size in a browser) = 1.6875em

Hope this helps.