vh, vw, vmin, vmax: How to use CSS Viewport Units
► We can define the viewport as the visible dimensions of the browser window in which your web page displays.
Viewport units then, are those that size elements relative to the dimensions of the viewport.
Viewport units include:
vw (viewport width)
vh (viewport height)
vmin (the viewport minimum)
vmax (the viewport maximum)
... and we will cover all of these in this video
Viewport units take numbers between 1 and 100 as values, and each number represents a percentage of the viewport. So for example, 50vw represents a value that is sized to half of the width of the viewport. 80vh represents a value that is sized as 80% of the height of the viewport, and so on.
► Timestamps:
0:00 Start
0:38 Defining the viewport and viewport units
1:01 The vw unit
1:51 How viewport units work
2:50 Viewport height and the vh unit
4:19 The vmin unit
6:25 The vmax unit
7:29 Summary
8:59 Browser support for viewport units
9:12 End
► Get the code:
CodePen: https://codepen.io/craigabourne/pen/a...
► Useful links:
MDN CSS Values & Units: https://developer.mozilla.org/en-US/d...
MDN - What is a Viewport? https://developer.mozilla.org/en-US/d...
Sitepoint - Viewport Units: https://www.sitepoint.com/css-viewpor...
Can I Use: https://caniuse.com/viewport-units
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Смотрите видео vh, vw, vmin, vmax: How to use CSS Viewport Units онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 18 Март 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 12,459 раз и оно понравилось 231 людям.