Instructor: In order to be able to effectively implement
the responsive web design ingredients
that we learned about in the last lecture,
we now need to quickly learn about how the rem unit
and how the max-width property work.
And let's actually start with the max-width property.
So here in our html, let's quickly create a div element
with the class of test,
and then let's select that.
And to start, I will simply define the width property
as 1,000 pixels, so just to see what happens.
Also, we should give it some background color
of red, let's say,
and also to see it a bit better,
a padding of 100 pixels,
okay?
So that's 1,000 pixel wide.
But now watch what happens when I decrease the screen.
So the element stays the same,
which we can see by this vertical scroll bars
that we have now.
So we can now basically scroll vertically here
because of course this element here still has 1,000 pixels.
And so therefore, the browser then needs to create
additional space here basically in the view port.
And so that's why we can scroll vertically like this, okay.
However, let's say that we don't want that to happen
and instead the behavior that we want to see
is that when there's no more additional space
to fit these thousand pixels here,
then the element should simply have the width
of the parent container.
And so that's exactly what we can use
the max-width property for.
So let's comment this one out and now say max-width.
So again, I'm using 1,000 pixels here,
and nevermind about using still pixels,
even though I said we shouldn't use them for a fluid layout
because here we are simply working with this property
and learning how it works.
Okay, let's start again with the big view port.
So now everything looks the same.
We can even inspect this here.
And so we see that it is still 1,000 pixels wide.
But now watch what happens
as we approach basically the end of the element.
So now we don't see anything happen.
But if we try to scroll vertically,
you see that it doesn't work.
And if we hover now,
we see that the element only has 912 pixels.
And if we go even more narrow, then it becomes even smaller.
So here we see that now it is only 455.
Oh, that's actually not the actual width.
So it is now 655 pixels, right?
So basically that's the width of the parent container,
which in this case is simply the body.
So the body has the same width now
as this element, all right?
And so this basically immediately makes this element here,
this test element flexible,
because now it very simply adapts
to the view port width, right?
Now you might have thought
that maybe we could have used percentages for this as well,
but actually that would not have the effect
that we were looking for.
So a percentage would not have worked
because up until 1,000 pixels, So like this,
we actually want the element
to be exactly 1,000 pixels wide.
So not any percentage of the view port.
Only once we reach a width here
that is less than the actual width of the element,
so only in that situation,
we actually want this width here
to adapt to the parent element.
So basically occupying 100%
of the width of the parent element, all right?
And so that is how max-width works.
And compressed into just one sentence,
we can say that if the container width is larger
than the specified max-width,
then the width of the element is equal
the value that was specified for max-width.
However, if the container width is less
than the specified max-width,
then the width of the element will be 100%
of the container element width, okay?
So take note of that summary,
and then hopefully you will never again forget
this important property here.
So take note of what I just said
and then hopefully you will never again forget
this very important property here now, okay?
But anyway, let's now move on to the rem unit.
Now, what does rem mean or what does it stand for?
Well, rem is the root element font size.
So that sounds quite strange indeed
but actually it is quite straightforward.
So the root of the document is the HTML element.
So basically the parent element of all the others, right?
Now, if we don't define any font size on this HTML element,
so which is again the root element,
then one rem is simply equal
to the default browser font size, which is always 16 pixels
unless the user does actually change it.
So let me actually demonstrate that to you here,
and again using the same example.
So I'm gonna use max-width again.
So let's say 500 rem, okay?
So what do you think the width here will be?
Well, remember that by default one rem
is equal to 16 pixel, right?
And again, that's because we did not specify any font size
on the HTML element.
And so therefore, the default font size of 16 is taken.
So one rem equals 16 pixels.
And so therefore, here this 500 rem will be,
well, let's do the calculation.
So 16 times 500.
So 8,000.
Oh, and actually I just wanted 50 rem.
So 50 rem would be 800 pixels, right?
So let's give it a save and then let's go check it out.
And so here we can immediately see right here
that it has a width of exactly 800 pixels, right?
And so that works.
Now, you might find it strange that we define length
in our design based on some font size, right?
But actually that is exactly
where the strength of the rem unit lies,
because then we can simply change the font size
on the HTML element
and that will then automatically change all the length
that are defined anywhere in our CSS
with the rem unit, right?
So let me give you some more example here.
So let's just give this here some white color
and give it a font size.
So let's say 10 rem or well, maybe just two rem actually.
So two rem would be 32 pixels, right?
So let's check out, and indeed that's right.
Also here we have another unit.
Let's move that down.
And this one we can also specify in rem.
Here let's say four rem.
And so four rem would be 64 pixels, right?
So let's confirm all that.
So indeed, we have 64 pixels here of padding,
then the width is again, as we see, 800 pixels,
and then as for the font size,
here it is specified of course in rem,
but I showed you before
that we can come here to the compute tab.
And if we then change for font size here,
it'll actually be the real one in pixels.
So as it is displayed on the screen.
So here it's already converted to pixels, right?
Because in the end, before elements can be displayed
on the page, all the relative units such as percentages
or rems needs to be converted back to pixels, okay?
And so here we see that it is indeed 32, okay?
But now let's say that on the HTML element right here,
we set the font size to just 10 pixels.
And so then one rem will no longer be 16 pixels
but it will instead be 10 pixels.
And so these 500 rem
that used to be 800 pixels, remember that?
So that's what we had before, but now not anymore
because now one rem will be 10 pixels.
And so 50 rem will be 500 pixels,
and the same will happen here.
So this will now be only 40 pixels
and a font size only 20 pixels.
And so if we take a look at this now,
then you see that basically the entire design,
which in this case is really small
but still the entire design here
shrink down basically by a factor of 62.5%.
And that's because 10 divided by 16 is 62.5%.
But that percentage doesn't really matter here.
What matters is that by changing the font size,
we can completely change the entire layout.
So if we try to double it,
then of course everything will get really big, right?
So now this element is 1,000 pixels
or at least it should be,
yes, it is,
and the text should be exactly 40 pixels
because two times 20 is 40, and the same for the padding.
So now it is 80 pixels, right?
And so maybe you can start to see
why this will be really, really handy
when we build responsive layouts.
Because for example, when we have a smaller screen,
then we want all the length to be a little bit smaller.
And then instead of having to change
all of these values here using media queries,
we can simply change the font size up here in the html
and that will then shrink everything down a little bit.
Okay, great.
Now, one useful trick as I mentioned in the last lecture
is to set the font size here to 10 pixels,
because then it is very easy to do the calculations.
So then we know immediately that this one here will be 500,
this is 40, and this is 20, right?
And so this is the way to go.
Setting the front size here to 10 pixels, okay?
Because again, then one rem will be exactly 10 pixels,
which is very easy to do calculations with.
However, this is still not perfect
because by doing it like this,
we will not respect the user's of the browser font size.
So let's say that the user changes the default
from 16 pixels to 20, then of course they would expect
that the font size on our page would increase, right?
But with this setup right here
that would actually not happen.
So no matter what the user would set the font size to now,
we would always have our default font size,
or root font size here at 10 pixels, right?
And so this would create huge usability problems for users
who for some reason have to increase
or even to decrease the font size of their browsers, okay?
And so in order to avoid that, we will not set the font size
to a fixed value like this,
but instead to a percentage of the default font size
of the browser.
So let's comment this one out,
and instead we will set the font size to 62.5 percentage.
And so let me explain you where that value comes from.
So we want our font size to be 10 pixels, right?
However, the default is 16 pixel.
And so we can simply divide 10 by those 16 pixels,
which will be 0.625, which is 62.5%.
And so that's exactly this value here, right?
So this percentage here is a percentage,
let me write it here also,
percentage of user's browser font size setting, all right?
And so again, if it is set to the default of 16,
then you see that 16 times 0.625,
this needs to be a comma in my case,
so that is then exactly 10, all right?
However, if for some reason
the user needs to change it to 18,
well then the font size increases to 11.28, right?
And so by using this technique,
we did actually respect the user's font size setting, okay?
And the same way,
if they set it like to 12 for some reason,
then our default font size on our page,
so one rem will then be 7.5, which in turn will make it
so that the entire layout is scaled down a little bit,
right?
So I hope that made sense.
And in fact, many, many, many web designers
and CSS developers use exactly this trick.
So it wasn't just me who came up
with his strange-looking technique,
but indeed it is something that is used widely
in the CSS developer community, okay?
And indeed, just to show you that it works,
here our font size is still at 20 pixels,
and the padding at 40, and the width at 500, all right?
And all of that dynamically,
because we are again respecting
the browser's font size setting
that the user chose for their particular case, okay?
And so now we know how the max-width property works
and how rem works.
And so from now on, we will no longer use pixels,
but we will always use rems,
and we will simply use that trick
where one rem is 10 pixels.
And so that is then very, very easy to do calculations with.
Nice, so hopefully all of that made sense to you
because it is important that you understand this
before moving on.
So make sure that you do understand it
and then let's go to the next lecture
where we will actually and finally start building
the Omnifood project.
So I can't wait to see you there.