Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Anthony Harrison
1,064 PointsFormula Used to Create Percentage Values?
"target ÷ context = result"
Can anyone give a better example so i can get a clear understanding please?
1 Answer
Wayne Priestley
19,579 PointsHi 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.
Abraham Juliot
47,353 PointsAbraham Juliot
47,353 PointsWidth 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)