September 17th, 2013, 10:28 AM
CSS em calculator
I am having problems understanding the rules of CSS' em rules
Em calc to try understand how to calculate the dimensions needed for my website, but I can't understand how this would affect everything else like the width or height of a photo that is being display for a more responsive website
September 17th, 2013, 09:21 PM
It seems a lot easier (to me at least) to use Firebug or a browser's built-in Developer Tools to check what the computed font-sizes are.
You've just got to remember that any time you set the font-size to something other than "100%" or "1em" that the pixel value for "1em" will be different from the parent and any sibling elements.
While you can use elastic layouts for responsive design, I prefer to use fluid layouts.
Here are two articles on the difference between the types:
Fixed vs Liquid vs Elastic
What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts?
As to photos, are you setting their dimensions in EMs? If so, then they'll scale according to the font-size that the <img> element inherits (I'm assuming you don't set a font-size on the <img> themselves). For responsive designs, I more often give "max-width:100%" to <img>s and let them scale as needed than to explicitly set their dimensions in EMs.
September 18th, 2013, 02:15 AM
I can't use the max-width property on the image, because it would ruin the dimension of the page
Last edited by cssbonding; September 18th, 2013 at 02:18 AM.
September 18th, 2013, 09:01 PM
September 20th, 2013, 02:22 PM
meh, just noticed that the link is giving wrong calculations for the px to em, I put in 1000px and it came up with 62.50em which is wrong, its suppose to be 71.50em
EDIT: ooops, didn't see something, its related to font size
Last edited by cssbonding; September 20th, 2013 at 03:21 PM.