cascading style sheets used different units for expressing the length.
Many CSS properties,
such as with bedding margin and fun size,
take land values.
Where lent is a number followed violence unit,
such as pixels unit.
Like I used in many previous examples,
we can use two types of length units in CSS related and absolute starting with relating
lengths units,
they specify.
A lint related with another Linz.
One great advantage in style sheets that use related units is that you can easily scale
from one will put the environment to another,
like from a dressed up to a smartphone,
creating responsive content.
Let's see now the most important related units,
starting with E M unit in CSS and the end unit,
is equal to the computed front size for the element to which the M is applied.
When I am,
units are declared on child elements that don't have a fun size define.
They will inherit their phone size from their parents or from another ancestor elements
possibly going all the way back to the root element under documents.
Let's see the following example to better understand I f.
Two paragraphs first and seconds inserted inside a Deve with glass name content.
I now set my class first.
We the font size off 15 pixels.
And as I said,
one AM unit is equal to the font size value created for the element.
So if I creates the line,
I'd property in the same ailment with the Valley.
One e m.
Corresponds to a value off 15 pixels to the property line.
I've If I give a value off two PM tow line,
it receives the value off two times 15 pixels that corresponds to 30 pixels.
I now set a value off 12 pixels to the font size off the class content.
As you see the text,
is inheriting the value set in their parent,
a situation that happens only on second class because this class has no defined fun size.
If I now define a phone size off 14 pixels in class seconds,
you check that The second paragraph assumes different size created in class seconds.
And when I had the line with value off 1 a.m. This time for class Second,
this property calculates the valley for the light ICT related to the farting pixels that I
define within the glass itself.
Any changes I make in different size.
Off the class content will not affect the properties created in the paragraphs because they
themselves have the font size property defined.
If you understand well,
all the M unit works,
then it's easy to understand the new R E M unit.
This unit is related two different size off route element HTML that my default is 16 pixels
,
but this value can be changed by the user.
I know.
Make a simple example to distinguish the two units in my root HTML element.
I set off on size off 14 pixels,
while India def content define phone size with value to R E M.
For the paragraphs,
I have the values one R E M for the first and one PM for the seconds.
What happens now?
The first paragraph that as diarrhea,
Munitz will calculate the value related to the farting pixels defines in the root element.
Well,
then ever fun size off 14 pixels,
while the second element will make the calculation related to the parent content as the
parent content is two times bigger than the value defined in route size,
the size in content is 28 pixels,
which will also be the value for the second paragraph if I change HTML Phone size.
Real effect,
as expected,
The two paragraphs.
Finally,
I changed from size for def content,
with value 12 pixels changing toe An absolute unit for this situation.
If I change HTML font size,
you only see changes in first paragraph because now second paragraph on size is related to
the 12 pixels that I define in class content.
Now the view part percentage lance related to the size off the window brother.
When the ICT or with off the bras Aries change,
they are scale accordingly.
The use of these units related to the view part are important because they adapt the size
off the contents to the size off the devices we can ever for possible different units
related with view part.
The 1st 2 are the unity Age that is related to 1% off the ICT.
Off the view part initial containing block that is our brother Window and the Visa Lou that
is related to 1% off the wit off the view part.
In this example,
we see two gifts creators,
the first being identified by the other class and the second by the content class.
I create now styles for these two classes by defining the 1st 1 with a light green
background color and the second with light blue color.
If I want the first gift to occupy off off the with and I've I just need to set do with to
a value off 50 V W and the IDs to 50 V h.
We can see that as I resize the window,
it will always occupy off off the with,
and I'd space Now far did,
if content,
I want that this element occupy 1/4 off the size off the window.
To get this behavior.
I just need to set the value to develop 25 end the age to the same value.
In this example,
Dave's occupy 75% off the view port.
I've if I want them to occupy all their eyes,
just need to give each of them a value off 50 or another combination of values in which the
same off the two East 1/100.
The last two units that use you part RV men and V Max units did allow you to access the
size off the smaller or larger size off the view port if he used the men.
You calculate a land that is related to 1% off the view port.
Smaller dimension and using remix is related to 1% off the view port.
Largest dimension.
You will now see an example where I have to block elements defined by the other class at
the top and content class below the other,
I said.
Now the ICT off these two thieves for the other.
I define a write off 20 mean and for the glass contento right off 250 pixels.
As you might expect for discontent class the it does not change because we are using an
absolute value for the other.
Right?
I used TV Men unit with Value 20 which makes it occupy 20% of related to the smaller size
off the view part in the browser,
you can see the expected behavior using this unit.
At this point,
I have the view port where the smaller size is the ICT.
So the ID for the other is related to the ICT off the view part that as the small size as I
resize the window,
the other I do not change because the view part right does not increase our decrees.
When I get to a point where the with off the view port becomes smaller than the eye,
I start having changes in the ID of the other as it is happening now,
because the smaller size of the view part is now changing.
If I return to the situation where the ID of the view parties the smaller size,
if I change the eye of the view port,
it suspected to ever change in the eyes off the other again.
Finally,
if you use for this example the V Max,
I have a change in the eat off the other this time related to the larger size off the view
.
Parts at this moment do with off the view part as the largest size,
so changing do with I ever changing the ice off the element other.
Let's now see the units in percentage.
This type of unit is very similar to the units related to the size of the view part,
but instead of using the view part as a reference,
it uses the ailment parents in this next example will be clear.
This behavior where I f another element that will contain within the contents.
Dif and I will define this same content dif outside the other for one off.
The case is the parent off content element is the dif ever and for the other content dif
outside.
The other element body is the parents.
I will now give a with off 800 pixels to the other elements and the Eid off 300 pixels.
In the content class,
I define a with with the percentage off 50%.
What will happen is that for the case off the def content inside the other do.
It will be 50% off the with off the other that is a fixed value.
So do it will be 400 pixels for the class content defined below the other.
The width will be defined in relation to the body which causes death.
Rece izing the window do with off the ailment will not be fixed to finish the absolute lent
units that are fixed and very easy to understand.
They always have the same size regardless of any other alighted settings.
They are highly dependent on the output reason why they are not recommended for use on
screen because screen sizes very so much.
One of the most used is pixels that I used in many examples,
being a unit that is related to the viewing device.
Other absolute units that are available like inches,
centimeters or millimeters.
In previous chapters,
I used pixels as units,
so I will now change this unit two centimeters in the brother.
We continue to F elements with fixed sizes,
since I'm using an absolute unit.