CSS Sizing Units - px, rem, em, vh, vw, % & more | Sigma Web Development Course - Tutorial #22

➡️ English Subtitles are now up for all the videos!

TimeStamps ⌚
00:00 Introduction
00:22 Sigma Web Development Course Intro
00:31 px
04:01 vw
07:31 vh
08:16 rem & em
13:38 vmin & vmax
16:41 More Units
25:43 Conclusion
26:01 Sigma Outro

python, C, C++, Java, JavaScript and Other Cheatsheets [++]:

►Learn in One Video[++]:

►Complete course [playlist]:

Follow Me On Social Media
Comment "#HarryBhai" if you read this 😉😉

[manshalkhatri]

What I understood is:
px depends on resolution,
vh vw are device specific,
vmin and vmax depends on orientation,
em is multiplier on current value,
rem is a multiplier on current value in respective to the root element,
% depends on parent

[sunshine]

SIGMA BATCH OP! This just isn't a web dev course to me anymore, it is helping me go through my hard days, when I am low, unclear about what should I do, doubting myself, academically, emotionally, all the relationships that have been perfect today stand at a very edge. I feel so overwhelmed....All that but, every night the one hour I come here to watch a video or two after completing all my work is the only thing I get excited for. It for sure is so so so informative, helpful and comprehensive course. Excellent work harry bhaiya ! I am not sure if it's (web dev) gonna help me some how but right now it you definitely are by motivating me to get out of my bed and work. It has actually helped me fix my routine, be active and engaged in activities throughout my day. I am really moved by how much this playlist is giving me a sense of security, comfort that I actually started commenting, writing, expressing myself like never before.

[saudansari]

This is one of the most complex video till now. i thought i understand everything when i was watching the video but when it came to implement it in code i caught myself confused. vw and vh was easy to understand. vmin & vmax took me aback for a bit but when it comes to minh and minw. i forgot what i watched about it. so i had to come back and watch it again.
harry bhai is raising the bar like anything.

[yuvrajsingh-fzhd]

i was confused in responsive web dev but i found this playlist when i searched for responsive html css based projects and now here i am watching every single video of the playlsit, so far i found them ver helpful they cleared most of my doubts now here i wam watching this unit specific video which will clear most of the responsive part for me so, just want to thank harry bhai to provide such content for free <3

[IamHuzaifaFaisal]

- You wrote lorem56 because they are next to each other and easy to type 😁
- The computed size will be 24px because the root element has a font size of 12px.
- 32px because the parent component has a font size of 16px
- vmin in phone will be width, and vmin in computer will be the height

#SigmaBatchOP

[mdnishatsarkar]

26:16 miss those line today "apni gao aur tao ki jamin mere nam kardo 😔"

By the way, Every ending time when i listen this line my face makes a smile automatically and i got a new hope to do something by do this course.

#sigma_batch_op
#take_love_harry_vai ❤️

[SamarthChawlaSam]

Bhaiya....Intro wala scene hamesha cool lagta hai....maine aaj tak aapka intro skip nahi kiya....maza aata hai woh dekhne mein. 👨‍💻👨‍💻

[sahilshaswani]

This is the best course I watched around 25 video and I am still watching to complete. I will rate this course 5 out 5 because the quality of the content is great.

[unknown-ckid]

I've been in web development for nearly a year now, have also done a few projects, and worked with languages like html and other webdev technologies, but never knew all of this knowledge about units, every time i open your videos i learn something new.

[second_inning_development]

Summery:-


Css unit

1) px -pixel (individual dot of display)
2) viewport - relative to screen display
vw- viewport width
vh- viewport height
3) em- relative to font size of parent container( if 2em = 2*parent element size
If parent height = 10px
Thn child height = 2*10px = 20px)

4) rem- relative to font size of root element (2rem= 2*size of root element )
5) vmin - in computer vmin =height
In phone vmin= width
6) vmax
7) min height = Min height of the container
( if for any containers min-height = 50px
Height= 10 px
For this case height of container will 50px)
8) max height ( Max height of container)
9) % - n% of parent element
( if height of a container is 100px, height of child 80%, height of child will be - 80% of 100px = 80px)


#sigmabatchOP

[surajbansal]

Harry bhai apke web development course learning ke doran yeh confusion rehta tha projects banate samay but this #sigmawebdevelopment course you demonstrate this topic widely in a single video.Course point of view is 5stars and I think you serves a lot in coding community, unvaluable.Thanks Harry bhai❤

[omkarsawant]

1)px (Pixels): Pixels are an absolute unit of measurement. They provide a fixed size regardless of other factors like text size or screen resolution. For example, 10px means the element is 10 pixels wide or tall.

2)rem (Root em): "rem" stands for "root em." One "rem" is equivalent to the font size of the root element (usually the <html> element). If the root font size is set to 16px, then 1rem is equal to 16px, and 2rem is equal to 32px. It's a relative unit that makes it easy to scale elements based on the root font size.

3)em (Ems): "em" is also a relative unit that's relative to the font size of the parent element. If the parent element's font size is 16px and you set a child element to 2em, it would be 32px (2 times the parent's font size).

4)vh (Viewport Height): "vh" is a relative unit that represents a percentage of the viewport height. For example, 50vh would be 50% of the height of the viewport, so it's responsive to the screen size.

5)vw (Viewport Width): "vw" is similar to "vh" but is relative to the viewport's width. For example, 25vw is 25% of the viewport width.

In summary, "px" is an absolute unit, "rem" and "em" are relative units based on font sizes, and "vh" and "vw" are relative units based on the viewport's dimensions. Each of these units has its use case in web design, allowing for both fixed and responsive layouts.

[Eesayousuf]

this makes me so happy Harry Sir... Please I request you continue this web development course... I am from Kashmir I can't able to buy any paid course and neither to go anywhere to learn web development... Bz I am frm poor family... And thanks alot

[toolplaza]

These tools are undoubtedly useful, the tools I have developed on my website are more basic and generic, but still important!

[mohitrobbin]

#solution 12:34
The size of the p tag will be 24px as we have given <html> tag a specific size. If we do not write 12px as the font size of root element then <p> tag font size will be 32px because it will take 16px as default.
#SigmBatchOP

[adddijain]

Harry bhai literally i was waiting for this topic video as i have learned html, css from your old videos but I am always confused in the size so this video helped me a lot thank u .
Best development tutorial by Harry bhai...❤❤❤

[notoppergamers]

12:35 font-size will be 12 x 2 = 24px
13:21 font-size will be 18 x 2 = 36px
Sigma Batch Op🔥🔥❤❤

[SamarthChawlaSam]

12:30 24px
13:17 36px
16:30 In this case in phone vmin = width

[asifali-dlyt]

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

[mastercodes]

love you harry bro your obedient pupil from Pakistan, I have learned your web development course now i am in JS series and also see your new videos sigma web development. I am very happy you are the best harry the best tutor the best man in my life who will changed my life. guys this is web development course . there is no course like this in whole Youtube . Don't miss this course i love you harry bro.What will i say to you no words with me for your thanks .harry is the best harry is the best