Ems & Rems: How to use CSS Units
► ems and rems are relative units. Properties with these units take their sizes from font sizes.
Elements that have properties using the ems unit are sized relative to the parent element. Unless they are a non-typographic property like height, or width. Then they take their size from the font size of the element itself.
ems are really useful for setting things like margins, padding, and border radius that consistent scale. Useful if you expect an element to recur in different sizes across the page. Buttons, for example.
Rems or 'root' ems give us much more consistency through a document as they take their size from a singular source - they reach up to the root html element, and size themselves off of the font size applied to that.
Perfect for setting consistently sized typography. Rems make it easy to resize text with media queries too, as we can just change the base font size applied to the root html element for different screen widths.
► Timestamps:
0:00 Start
1:24 The em unit
3:46 Issues with ems and nested content
5:32 Em units with non-typographic properties
6:48 The rem unit
7:29 Setting font size on the root html element
8:26 Fixing the nesting amplification issue with rems
9:56 Scaling rem font sizes with media queries
10:33 Using ems for consistently scaling visual properties
12:22 Summary
► Get the code:
Starting CodePen https://codepen.io/craigabourne/pen/N...
Finished CodePen: https://codepen.io/craigabourne/pen/w...
► Useful links:
CSS Relative Units - https://thecssworkshop.com/lessons/re...
Em vs rem vs px - https://engageinteractive.co.uk/blog/...
Font sizing with rem - https://snook.ca/archives/html_and_cs...
MDN CSS Values & Units: 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
Смотрите видео Ems & Rems: How to use CSS Units онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 13 Март 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,508 раз и оно понравилось 147 людям.