Original subtitles

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 a thousand 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,

the padding of a hundred pixels.

Now okay, so that's a thousand pixel wide.

But now watch what happens when I decrease the screen.

So, the elements stays the same,

which we can see by these vertical scroll bars

that we have now.

So, we can now basically scroll vertically here,

because of course this element here

still has a thousand pixels.

And so therefore,

the browser then needs to create additional space here,

basically in the viewport.

And so that's why we can scroll vertically like this.

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 a thousand pixels here,

and never mind 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 viewport.

So, now everything looks the same.

We can even inspect this here.

And so, we see that it is still a thousand 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.

Well, that's actually not the actual width.

So, it is now 655 pixels.

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.

And so, this basically immediately makes this element here,

this test element flexible.

Because now it very simply adapts to the viewport width.

Now, you might've 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 a thousand pixels,

so like this.

We actually want the elements

to be exactly a thousand pixels wide.

So, not any percentage of the viewport.

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 a hundred percent

of the width of the parent element.

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.

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.

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's 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.

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 500rem.

So, what do you think the width here will be?

Well, remember that by default

1rem is equal to 16 pixel.

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, 1rem equals 16 pixels.

And so, therefore here this 500rem

will be, well, let's do the calculation.

So, 16 times 500, so 8,000.

No, and actually I just wanted 50rem.

So, 50rem would be 800 pixels.

So, let's give it a save.

And then let's go and check it out.

And so here,

we can immediately see right here

that it has a width of exactly 800 pixels.

And so, that works.

Now, you might find it strange

that we define length in our design

based on some font size.

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.

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 10rem.

Or, well, maybe just 2rem actually.

So, 2rem will be 32 pixels.

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 4rem.

And so, 4rem would be 64 pixels.

So, lets 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 computer tab.

And if we then change for font-size here,

it will actually be the real one in pixels.

So, as it is displayed on the screen.

So, here it's already converted to pixels.

Because in the end,

before elements can be displayed on the page,

all the relative units such as percentages or ramps,

needs to be converted back to pixels.

And so, here we see that it is indeed 32.

But now, let's say that on the HTML element right here,

we set the font-size to just 10 pixels.

And so then, 1rem will no longer be 16 pixels,

but it will instead be 10 pixels.

And so, these 500rem

that used to be 800 pixels, remember that?

So, that's what we had before,

but now not anymore.

Because now 1rem will be 10 pixels.

And so, 50rem will be 500 pixels.

And the same will happen here.

So, this will now be only 40 pixels

and the 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

shrank 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.

So, now this element is a thousand 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.

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.

And so, this is the way to go.

Setting the font-size here to 10 pixels.

Because again, then 1rem 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 definition

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.

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 actually our root font-size here at 10 pixels.

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.

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.

So, this percentage here is a percentage,

let me write that here also.

Percentage of users

browser font-size setting.

And so again, if it is set to the default of 16,

then you see that 16 times 0.625,

which needs to be a comma in my case.

So, that is then exactly 10.

However, if for some reason

the user needs to change it to 18,

well, then the font-size increases to 11.28.

And so, by using this technique,

we did actually respect the user's font-size setting.

And the same way,

if they set it like to 12 for some reason,

then our default font-size on our page.

So, 1rem will then be 7.5,

which in turn will make it so,

that the entire layout is scaled down a little bit.

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 this strange looking technique.

But indeed, it is something that is used widely

in the CSS developer community.

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.

And all of that dynamically,

because we are again,

respecting the browser's font-size setting

that the user chose for their particular case.

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 1rem 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.