Using CSS Units correctly: Pixels and Percentages
► Modern CSS units allow us to set the sizes of a whole host of CSS properties.
There are a range of different measurement units like pixels, rems and ems, vh and vw, vmin, vmax, %, millimeters, inches, centimeters, points, quarter millimeters, and many others.
There is no need to know all of these. Over the next few videos, we will look at which ones we should know, and in which circumstances developers use them today.
This video covers the difference between absolute and relative units. We look at one of each type in. Pixels for defining fixed sizes, and percentages for relative or adaptive sizes.
► Timestamps:
00:00 Start
01:50 Types of absolute & relative units
02:35 Specifying a unit
02:58 Pixels
04:21 Relative Units & percentages
05:41 Demonstrating percentages in Codepen
07:47 How percentages work differently with line-height
09:28 Checking how percentages work on given properties on MDN
09:46 Summary
► Get the code:
Starting CodePen - https://codepen.io/craigabourne/pen/w...
End CodePen - https://codepen.io/craigabourne/pen/K...
► Useful links:
CSS Absolute Units - https://www.w3.org/TR/css-values-3/
CSS Relative Units - https://thecssworkshop.com/lessons/re...
Em vs rem vs px - https://engageinteractive.co.uk/blog/...
MDN CSS Pixel - https://developer.mozilla.org/en-US/d...
A pixel is not a pixel: https://www.quirksmode.org/blog/archi...
MDN Percentages - https://developer.mozilla.org/en-US/d...
► 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
Смотрите видео Using CSS Units correctly: Pixels and Percentages онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 08 Март 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,398 раз и оно понравилось 152 людям.