I'm studying responsive layout and I already know that to create a flexible part you need to use relative measure like In and%. But I still can not understand what the real difference between one and another ...
... and if it is possible to achieve the same result using only% and have no problems.
The units em and ex are relative to the size of the source. ex is the height of the lowercase "x", and em is simply the "font size" (the unit name historically comes from the "M" width of the uppercase, but This setting is not used in CSS ).
Thatway,ifyouhaveanelementthatneedstobeproportionaltoabodyoftext(say,aboxwithtextinside,sothetextneverleavestheboxwhenthefontincreasesoroverspacewhenthefontdecreases)thenem-ormorerarelyex-isindicated.
Since%isproportionaltothedimensionsoftheparentelement,soifwhatyouwantisforexamplethatoneelementoccupies80%oftheavailablespace,andanothertheremaining20%,thatunitisindicated.Therearealsothevw,vh,vmin,andvmaxunitsthatareproportionaltotheentirescreen(regardlessofelementhierarchy),andthat
Here explains the difference between all CSS metrics.
EM
Units of EM values are the most complicated to work with. It is abstract and arbitrary. Here is an example, 1em is equal to the current font size of the element in question, ie if you have not yet defined font size anywhere on the page then it will automatically pick up the browser default font size, which is probably 16px . So, it is defined by default 1em = 16px . Let's say you set the body { font-size:20px } tag so the 1em will become 20px . So it works.
Another example: If you create a h1 { font-size: 2em; } tag, the size of H1 in px will be 32px if you have not set some value yet in css.
Percentage%
Percentage just as the name says works with percentage of value. If a parent is the size of 20px , and you set the child with font-size:50% , it will have the size of 10px .
The percentage is very good for working with the growing and decreasing size tools on the text page.
