1 00:00:00,820 --> 00:00:01,360 ‫Hey, there. 2 00:00:01,510 --> 00:00:07,060 ‫Welcome back, Siobhan, the site now in this lecture, let us discuss about VSS Unity. 3 00:00:07,390 --> 00:00:11,380 ‫Basically, whenever we use different values, we need to pass some unity. 4 00:00:11,800 --> 00:00:17,650 ‫For example, if I'm walking with font size, I will be using maybe pixel, maybe any other type. 5 00:00:17,970 --> 00:00:21,370 ‫Now the other type we are going to discuss in this lecture. 6 00:00:22,030 --> 00:00:27,370 ‫So whenever we work with images, whenever we walk with fonts, whenever we walk with any type of size, 7 00:00:27,760 --> 00:00:29,110 ‫we have different units. 8 00:00:29,710 --> 00:00:31,210 ‫We can utilize pixel. 9 00:00:31,360 --> 00:00:32,830 ‫We can utilize them. 10 00:00:33,070 --> 00:00:34,600 ‫We can utilize them. 11 00:00:34,840 --> 00:00:42,220 ‫Then we can also utilize percentage how these units differ from each other and which one should we prefer. 12 00:00:42,550 --> 00:00:46,150 ‫So in this lecture, we are going to discuss about them in depth. 13 00:00:46,750 --> 00:00:52,840 ‫The first thing is, I'm just giving you a reference so you can remember them for pixel user reference 14 00:00:52,840 --> 00:01:01,570 ‫all fixed for them, use a reference of Root and for M, as well as percentage user reference of period 15 00:01:01,570 --> 00:01:02,620 ‫or inheritance. 16 00:01:03,430 --> 00:01:04,630 ‫These are just reference. 17 00:01:04,660 --> 00:01:09,070 ‫Let us discuss about them and understand why these reference and how they're going to work. 18 00:01:09,670 --> 00:01:15,850 ‫The first thing is whenever we want to have our fixed size, it doesn't matter if we are using smartphone. 19 00:01:16,000 --> 00:01:24,070 ‫If we are using a laptop or maybe a tablet or any type of a screen, if we want a fixed size, then 20 00:01:24,070 --> 00:01:25,540 ‫we are going to use Pixel. 21 00:01:25,960 --> 00:01:33,460 ‫For example, if I have this image and I want this image to be 50 pixels by 50 pixel, no matter what, 22 00:01:33,940 --> 00:01:37,390 ‫then I am going to utilize the pixel part. 23 00:01:37,540 --> 00:01:43,780 ‫So what I'm going to do is I'm going to select this image and here I'm going to provide width as well 24 00:01:43,780 --> 00:01:44,350 ‫as height. 25 00:01:46,000 --> 00:01:47,230 ‫Let me save this one. 26 00:01:47,260 --> 00:01:50,020 ‫Get back here at 50 50. 27 00:01:50,260 --> 00:01:51,190 ‫We want fixed. 28 00:01:51,340 --> 00:01:52,030 ‫That's great. 29 00:01:53,130 --> 00:01:58,470 ‫Now, let us understand the other one, whenever we have fixed case pixel is the best we understood. 30 00:01:59,040 --> 00:02:00,150 ‫But what about other? 31 00:02:00,690 --> 00:02:06,600 ‫Now the next one that I want to discuss about is them pretty important and easy to use. 32 00:02:06,930 --> 00:02:08,010 ‫Most recommended. 33 00:02:08,640 --> 00:02:14,400 ‫So suppose here we have this speed dog and we have some content here that is our text. 34 00:02:15,000 --> 00:02:18,060 ‫So suppose I want to use them here now. 35 00:02:18,060 --> 00:02:21,190 ‫The first thing REM depends on rood value. 36 00:02:21,210 --> 00:02:25,870 ‫As I said, remember the reference head, I'm taking HDMI. 37 00:02:26,490 --> 00:02:28,550 ‫This is our rude and head. 38 00:02:28,560 --> 00:02:33,090 ‫I have one size, my default phone size as 16 pixel. 39 00:02:33,930 --> 00:02:39,240 ‫Now, whenever we are going to utilize them, whenever we are going to use them, it will depend on 40 00:02:39,240 --> 00:02:41,010 ‫this 16 pixel only. 41 00:02:41,640 --> 00:02:44,880 ‫So suppose let me take this feedback for first. 42 00:02:47,450 --> 00:02:56,390 ‫And head on when we use on size as one, then now head, the calculation will be one in 216. 43 00:02:56,720 --> 00:02:59,570 ‫Here it depends on this HDMI value. 44 00:02:59,790 --> 00:03:06,290 ‫So one in 16 is 16 itself, so the value will be 16 Pixel, four different sizes. 45 00:03:07,040 --> 00:03:12,020 ‫But but but if I change it to maybe do them for now, see this one. 46 00:03:12,440 --> 00:03:14,790 ‫This value will be 32 pixel. 47 00:03:15,110 --> 00:03:15,950 ‫Get back here. 48 00:03:16,340 --> 00:03:19,460 ‫You can see it's just off it ties. 49 00:03:20,850 --> 00:03:22,860 ‫Let me try to use one point one. 50 00:03:24,450 --> 00:03:26,340 ‫So we can see this small, different. 51 00:03:26,430 --> 00:03:34,230 ‫Get back here now you can see this is 16 pixel, but this is seventeen point six one point one actually 52 00:03:34,500 --> 00:03:38,100 ‫one point one ram equal to seventeen point six pixel. 53 00:03:38,730 --> 00:03:39,930 ‫You can see the difference. 54 00:03:41,690 --> 00:03:43,040 ‫I hope you got the idea. 55 00:03:43,670 --> 00:03:47,990 ‫So whenever we used Saddam, it will directly depend on this one size. 56 00:03:48,440 --> 00:03:55,010 ‫Now, the most common thing that everybody usually do is they use this as 10 pixels, so all the calculation 57 00:03:55,010 --> 00:03:56,800 ‫in them will be simplified. 58 00:03:56,810 --> 00:03:58,480 ‫Otherwise it will be too confusing. 59 00:03:58,490 --> 00:03:59,840 ‫What is 1.3 REM? 60 00:04:00,020 --> 00:04:02,990 ‫If this is 16, so you need to calculate every time. 61 00:04:03,350 --> 00:04:08,060 ‫Now, if I say 1.3 REM, it will be 13 pixels. 62 00:04:08,420 --> 00:04:09,020 ‫That's it. 63 00:04:10,310 --> 00:04:12,200 ‫So that's how it is going to work now. 64 00:04:12,260 --> 00:04:19,190 ‫You see this pixel sizes and because the speed that was dependent on this default value, but now this 65 00:04:19,190 --> 00:04:22,100 ‫one is dependent on the 1.3 rim. 66 00:04:22,100 --> 00:04:27,590 ‫The other one is dependent on the HDMI email phone size, which is then pixel now. 67 00:04:27,830 --> 00:04:29,180 ‫And that's why it is a small. 68 00:04:30,640 --> 00:04:38,800 ‫I hope you got the idea, so, Graham, depends on the road, which is are HTML now why we use them, 69 00:04:38,800 --> 00:04:46,720 ‫why it is so important whenever we want to increase or decrease size for entire thesis part and our 70 00:04:46,720 --> 00:04:49,930 ‫style, dirtiest all different elements altogether. 71 00:04:50,440 --> 00:04:53,200 ‫We don't have to change this one by one manually. 72 00:04:53,890 --> 00:04:58,080 ‫What I can do is I can just increase the size here, see and get back here. 73 00:04:58,090 --> 00:04:59,350 ‫It's increased. 74 00:04:59,950 --> 00:05:01,660 ‫And this is pretty important. 75 00:05:03,090 --> 00:05:07,960 ‫Now the next one is M, as well as the percentage they both walk in the same manner. 76 00:05:08,050 --> 00:05:09,930 ‫So let us understand him first. 77 00:05:10,680 --> 00:05:17,580 ‫Now the REM dependent on the route, but M depends on bearing what example. 78 00:05:17,820 --> 00:05:20,910 ‫Let me try to increase the size of this aid that won't leave. 79 00:05:21,360 --> 00:05:28,980 ‫So if you jump out and are always we have this item and debated for this aid, I guess this beat out 80 00:05:29,490 --> 00:05:33,180 ‫and despairing for the speed tag is this new section body and then. 81 00:05:34,290 --> 00:05:35,970 ‫So that's how the values play. 82 00:05:36,120 --> 00:05:38,460 ‫So let me try to increase the size here. 83 00:05:38,460 --> 00:05:45,180 ‫Let me try to use font size as one point three am if I save this one. 84 00:05:46,430 --> 00:05:50,350 ‫Get back here, you can see this is pretty big than expected. 85 00:05:52,470 --> 00:05:59,070 ‫Via because miscalculated multiplying experiences, so here the value of MS. 86 00:05:59,610 --> 00:06:02,700 ‫Phone size over this period multiplied by 1.3. 87 00:06:02,730 --> 00:06:06,180 ‫So here it is 13 pixel multiply by 1.3. 88 00:06:06,570 --> 00:06:07,950 ‫That's how this is going to work. 89 00:06:08,250 --> 00:06:09,830 ‫So depend on. 90 00:06:10,710 --> 00:06:17,490 ‫I hope you got the idea of the preference of inheritance and patent now and depend on the size. 91 00:06:18,030 --> 00:06:19,680 ‫So suppose if I take. 92 00:06:20,970 --> 00:06:22,320 ‫Fifty bucks in here. 93 00:06:23,830 --> 00:06:24,500 ‫What will be the. 94 00:06:25,120 --> 00:06:28,060 ‫What will the value of a hair -- site? 95 00:06:28,240 --> 00:06:30,490 ‫It will be 1.3 and 250. 96 00:06:30,670 --> 00:06:31,480 ‫Get back here. 97 00:06:31,510 --> 00:06:36,310 ‫You see, if I scroll down here, you see it's bigger than all these sticks. 98 00:06:37,120 --> 00:06:37,600 ‫Why? 99 00:06:38,700 --> 00:06:42,930 ‫Because Imus calculated, according to the parent multiplication. 100 00:06:43,500 --> 00:06:44,910 ‫So I hope you got the idea. 101 00:06:45,120 --> 00:06:53,280 ‫Let me take one point six RAM here, and if I take one point three, it will be 16 in the 1.3. 102 00:06:53,730 --> 00:06:54,750 ‫Let me get back here. 103 00:06:54,960 --> 00:06:56,430 ‫You can see it's still bigger. 104 00:06:57,530 --> 00:07:04,220 ‫But if I use one name here, save this one, it will be 16 pixels multiplied by one. 105 00:07:04,460 --> 00:07:05,180 ‫Get back here. 106 00:07:05,330 --> 00:07:06,710 ‫You see now they are saying. 107 00:07:08,430 --> 00:07:13,200 ‫So that's how this is going to work, it is important for you to understand all these value as we are 108 00:07:13,200 --> 00:07:17,160 ‫going to work with batting margin and few other properties as well. 109 00:07:18,180 --> 00:07:21,480 ‫One last important point with this percentage now. 110 00:07:21,900 --> 00:07:24,270 ‫It is also dependent on dependent care. 111 00:07:24,360 --> 00:07:32,850 ‫So here if I say 100 percent, 1.6 and 200 percent, so 16 percent and 100 percent, which will be 16 112 00:07:32,850 --> 00:07:33,300 ‫percent. 113 00:07:33,440 --> 00:07:34,140 ‫Get back here. 114 00:07:34,150 --> 00:07:35,010 ‫Everything is same. 115 00:07:35,490 --> 00:07:37,620 ‫But if I said 200 percent. 116 00:07:37,980 --> 00:07:40,260 ‫So what will be the 200 percent of 60? 117 00:07:40,500 --> 00:07:42,390 ‫It will be 30 to get back here. 118 00:07:42,750 --> 00:07:45,780 ‫So this is 32 now and this is 60. 119 00:07:47,030 --> 00:07:54,590 ‫So the percentage is also dependent on beating the M is dependent on parent, but them is dependent 120 00:07:54,590 --> 00:08:02,630 ‫on the route that is given, and Exxon is fixed in all the cases, big sellers aspects, it doesn't 121 00:08:02,630 --> 00:08:03,650 ‫matter where you are. 122 00:08:04,580 --> 00:08:09,890 ‫But remember, this is dependent on pain care if I change the value of parent or 20%. 123 00:08:10,670 --> 00:08:15,230 ‫This will be for, you know, because that's 200 of its parent. 124 00:08:15,560 --> 00:08:16,280 ‫Get back here. 125 00:08:16,490 --> 00:08:17,370 ‫This is 20. 126 00:08:17,390 --> 00:08:18,200 ‫This is what 40. 127 00:08:19,180 --> 00:08:20,590 ‫That's how this is going to work. 128 00:08:21,130 --> 00:08:23,950 ‫I hope you got the idea of all these four values. 129 00:08:24,460 --> 00:08:28,090 ‫I have a good diagram to make you understand the same. 130 00:08:31,470 --> 00:08:38,430 ‫So if you look here, REM, RAM Ahmadi, if it is 1.4m, we are multiplying with the road, which is 131 00:08:38,430 --> 00:08:43,410 ‫a demon and into 1.4, which is what if I say there is one point to them. 132 00:08:43,740 --> 00:08:46,410 ‫It is ten into 1.2, which is great. 133 00:08:46,950 --> 00:08:54,810 ‫If I say 1.40pm, it is peering into one point four, 14, 14, four, if I say 1.2m. 134 00:08:55,770 --> 00:08:58,470 ‫That is 14 into 1.0 meters. 135 00:08:58,470 --> 00:08:59,430 ‫Sixteen point eight. 136 00:09:00,380 --> 00:09:05,390 ‫That's it, that's all for this lecture, we will get more information as we move forward with these 137 00:09:05,390 --> 00:09:05,930 ‫value. 138 00:09:06,290 --> 00:09:12,860 ‫Now remember for padding, it is going to work exactly the same, we suppose here if I add padding. 139 00:09:15,400 --> 00:09:24,620 ‫Let it do rim, as well as big business to them, and here, let me say font size as one m. 140 00:09:26,290 --> 00:09:30,550 ‫And fighting has won and saved this one. 141 00:09:31,300 --> 00:09:32,120 ‫Get back here. 142 00:09:32,890 --> 00:09:35,980 ‫So the padding for this hole is called. 143 00:09:36,850 --> 00:09:40,630 ‫We have padding 20 here, 20 at the top left and right. 144 00:09:40,630 --> 00:09:41,710 ‫Everything is 20. 145 00:09:41,740 --> 00:09:42,160 ‫Why? 146 00:09:43,120 --> 00:09:46,270 ‫Because this is to them, which has been in total. 147 00:09:47,020 --> 00:09:49,270 ‫So it's 20 member. 148 00:09:50,050 --> 00:09:52,870 ‫And if I get back here, select this item. 149 00:09:54,370 --> 00:09:55,380 ‫Which is anxiety. 150 00:09:55,780 --> 00:09:56,140 ‫Yup. 151 00:09:56,620 --> 00:10:00,070 ‫Now you can see batting is 2020, 2020. 152 00:10:00,490 --> 00:10:00,970 ‫Why? 153 00:10:01,360 --> 00:10:04,690 ‫Because one in 220, this is true and depicts the light. 154 00:10:06,130 --> 00:10:13,120 ‫And now here, if I change this to 1.5m, that will be 1.5 in 220, we just have to get back here. 155 00:10:13,750 --> 00:10:20,890 ‫And if I see it's to 40, 30, 30, that's how this is going to work for padding as well as for margin. 156 00:10:21,550 --> 00:10:22,120 ‫That's all. 157 00:10:22,120 --> 00:10:24,040 ‫I hope this lecture was helpful. 158 00:10:24,070 --> 00:10:25,090 ‫Thank you for calling. 159 00:10:25,480 --> 00:10:27,220 ‫And I see you guys in the next one.