‫Hey, there.
‫Welcome back.
‫Now let us quickly discuss about a new unit, which as we edge and VW.
‫What is this and why they are important?
‫Now first thing is, I hope you remember about you.
‫What is your work?
‫The screen that is visible to us currently, that is from here to here.
‫What is it?
‫It is viewport height.
‫And what is VW?
‫It is viewed with.
‫So whenever we want to utilize the height and weight of our current screen, we can utilize V Edge and
‫VW.
‫One big, important information.
‫There will be several sites that utilize this village and VW to add their banner, or maybe to just
‫cover the screen.
‫For example, if this is the current view, if you see this, it means the background color here.
‫So making our banner.
‫And then add a background.
‫Now, this is the current screen size, I haven't removed any padding.
‫Earnings, you know, gross margins, it'll save this one, get back in here, you can see now this
‫is currently taking the exact size which is required by content, but maybe we want to cover all the
‫visible screen sizes at that point of time.
‫We can utilize the edge as well as VW, for example.
‫This is Daniel and had I considered.
‫Height as hundreds the age.
‫If I jump back here now, you can see it start from here, this point.
‫Then here it has captured the height and if I scroll down, you can see the other content start.
‫That means one which equals to one percent off screen size 100, which equals 200 percent of screen
‫size in terms of height.
‫And this is important when we want to cover 100 percent of screen height as well as width, we can utilize
‫it.
‫This works well when we want to cover the maybe here we have navigation bar.
‫And then here we have some background image and then button here, something like this.
‫It is pretty common to have this type of style.
‫Maybe you are working on a portfolio, or maybe you are working on e-commerce websites that want to
‫have such hair and then a complete background image.
‫So that's all.
‫Instead of using background color, you can utilize background image and as you can see, all the other
‫content is after this.
‫So this is how it is going to work.
‫If I want to cover the entire world, I will use V.W.
‫At this point of time, we are using block elements, so there is no issue about which.
‫Now, maybe we have some element and we want to stretch it to complete the award.
‫We can utilize VW.
‫One good example can be related to font size.
‫So maybe right now our phone sizes.
‫Exactly 16 pixel by default via utilizing that.
‫So on, one of them will be 16 pixel mark.
‫Suppose I want to organize my phone size according to my screen.
‫What I can do is I can jump here and utilize this information.
‫I'm going to select the information and insight that I'm working on will be done.
‫And here I'm going to use font size.
‫Now, if I'm using two, then that will be how do you do pixel, right?
‫So I saved this on.
‫Get back here.
‫So this program will be 32 mixing.
‫OK, I got the idea, but I wanted this to change as I changed my screen size.
‫One thing I can do is I can define three ways like our mediocrity.
‫So with Dublin, I can change red, the mobile I can change, or I can use calculation function.
‫So here I have calc and I can pass the size.
‫Plus, I can pass 0.5 VW now just VW is viewport with and it will keep on changing as we increase and
‫decrease the size head.
‫If you look at this point now at the bottom.
‫You can see it's changing its size.
‫If you want to let me use this as for free for now and also take this as do so we can properly visualize
‫it back here.
‫Now head, if you see the font is changing in a drastic way, and that's how this is going to work.
‫So how do you can utilize this one village and it should work fine?
‫Now here, what we can do is we can utilize our mediocrity and then define our marks on minimum wage.
‫So minimum wage.
‫As 70 percent.
‫But actually, as does this tolerance point.
‫That means about seven excel, we can have our own settings here, I can utilize this and I can just
‫use them.
‫So for all this, I it, this is going to work.
‫But as soon as we reach this minimum point 780 pixel, this will come in to play it back here.
‫So this is working fine, this is working fine now you can see it's not changing, so the size is not
‫changing here, I just took an example you can use as one room itself or maybe 1.5 them.
‫And here you can see it's increasing, decreasing.
‫But after reaching out to mediocrity, it's not changing.
‫So that's how you can add a limit to our calculation itself.
‫I hope this lecture was helpful.
‫And this is pretty important.
‫The hard part is important.
‫This part is OK.
‫We might use, we might not use or guess how art is utilized several times.
‫The court just gave us access to our viewpoint, which is important.
‫And nowadays you can understand that you both are different, pretty much different for different mobiles,
‫for different tablets and even with monitors.
‫We are working with tons of sites nowadays.
‫So that's why this part is important and you for falling and I see you guys in the next one.