title
CSS Units (CSS Lengths: rems, ems, pixels, percents, and more)

description
What is the difference between ems and rems? When should I use pixels or percentages? How does vmin and vh work? How long is a piece of string? All these questions and more, Let's talk about CSS units. Patrons get the files here: https://www.patreon.com/posts/css-units-css-3563073 - - - Percent - 0:57 Viewport Width & height - 3:01 Viewport Min & Max - 4:15 EX & CH - 6:08 EM's & REM's - 8:44 Absolute lengths: 13:28 Pixels! - 14:52 - - - This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips Listen to Travis' Podcast - http://www.travandlos.com/ Get awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

detail
{'title': 'CSS Units (CSS Lengths: rems, ems, pixels, percents, and more)', 'heatmap': [{'end': 54.463, 'start': 29.909, 'weight': 1}, {'end': 188.371, 'start': 177.486, 'weight': 0.776}, {'end': 261.166, 'start': 239.099, 'weight': 0.74}, {'end': 389.871, 'start': 370.603, 'weight': 0.701}, {'end': 565.146, 'start': 516.076, 'weight': 0.823}], 'summary': 'Covers 15 css units, categorizing them into absolute and relative lengths, explaining their impact on dimensions and grid systems. it also explains viewport units including vw, vh, vmin, and vmax, allowing elements to be sized relative to the browser viewport dimensions. additionally, it delves into absolute dimensions used in css such as inches, centimeters, millimeters, points, picas, and pixels, highlighting their physical measurements, historical use, and prevalence as the most commonly used css unit.', 'chapters': [{'end': 351.95, 'segs': [{'end': 67.113, 'src': 'heatmap', 'start': 29.909, 'weight': 0, 'content': [{'end': 34.674, 'text': 'You can separate these units into two categories, absolute links and relative links.', 'start': 29.909, 'duration': 4.765}, {'end': 37.706, 'text': "Let's start with relative lengths.", 'start': 35.984, 'duration': 1.722}, {'end': 40.83, 'text': 'Relative lengths get their measurements based on something else.', 'start': 38.267, 'duration': 2.563}, {'end': 44.534, 'text': 'There are three things that relative units base their dimensions on.', 'start': 41.09, 'duration': 3.444}, {'end': 50.32, 'text': "Their parents' dimensions, the currently declared font size, and the viewport dimensions.", 'start': 44.954, 'duration': 5.366}, {'end': 54.463, 'text': "So let's start with one of the easiest ones to understand, percentages.", 'start': 51.141, 'duration': 3.322}, {'end': 58.787, 'text': 'Percentages are only relative length based on their parent.', 'start': 55.184, 'duration': 3.603}, {'end': 62.389, 'text': "So let's say I have this blue parent and inside is a child.", 'start': 59.027, 'duration': 3.362}, {'end': 66.272, 'text': 'And I have this box here at 400 pixels by 400 pixels.', 'start': 62.769, 'duration': 3.503}, {'end': 67.113, 'text': "That's the blue box.", 'start': 66.312, 'duration': 0.801}], 'summary': 'The transcript explains relative lengths, including percentages and their relationship to parent dimensions, using a 400x400 pixel blue box as an example.', 'duration': 44.572, 'max_score': 29.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY29909.jpg'}, {'end': 213.014, 'src': 'heatmap', 'start': 177.486, 'weight': 2, 'content': [{'end': 178.406, 'text': 'See, it has a padding.', 'start': 177.486, 'duration': 0.92}, {'end': 179.567, 'text': "Cool, that's percentages.", 'start': 178.606, 'duration': 0.961}, {'end': 180.927, 'text': "So let's move on.", 'start': 179.627, 'duration': 1.3}, {'end': 184.449, 'text': 'There are four units that are based on the dimensions of the browser viewport.', 'start': 181.268, 'duration': 3.181}, {'end': 188.371, 'text': 'Those are VW, VH, Vmin, and Vmax.', 'start': 184.809, 'duration': 3.562}, {'end': 194.093, 'text': 'The first two, VW and VH, they divide the viewport into a grid of 100 units.', 'start': 188.851, 'duration': 5.242}, {'end': 196.154, 'text': 'VW means viewport width.', 'start': 194.473, 'duration': 1.681}, {'end': 207.622, 'text': 'If you declare this element as the width is gonna be 50 VWs, then you see that the width of the element is exactly 50% of the viewport.', 'start': 196.374, 'duration': 11.248}, {'end': 213.014, 'text': "So let's shrink this viewport and you can see that the element responds by growing and shrinking.", 'start': 208.364, 'duration': 4.65}], 'summary': 'Viewport units (vw and vh) divide the viewport into a grid of 100 units, where 1 vw represents 1% of the viewport width.', 'duration': 35.528, 'max_score': 177.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY177486.jpg'}, {'end': 261.166, 'src': 'heatmap', 'start': 239.099, 'weight': 0.74, 'content': [{'end': 247.061, 'text': "you can declare viewport width units on the height of elements and viewport height elements on the width of units and then be like isn't that wild?", 'start': 239.099, 'duration': 7.962}, {'end': 256.124, 'text': "you're like, oh my goodness, what i can't even i can't even all right.", 'start': 247.061, 'duration': 9.063}, {'end': 259.985, 'text': "let's get into the next one, vmin and vmax.", 'start': 256.124, 'duration': 3.861}, {'end': 261.166, 'text': 'these ones are a little tricky.', 'start': 259.985, 'duration': 1.181}], 'summary': 'Exploring viewport units for width and height, vmin, and vmax', 'duration': 22.067, 'max_score': 239.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY239099.jpg'}], 'start': 0.089, 'title': 'Css units and viewport units', 'summary': 'Discusses 15 css units, categorizing them into absolute and relative lengths, explaining their impact on dimensions and grid systems. it also covers viewport units including vw, vh, vmin, and vmax, allowing elements to be sized relative to the browser viewport dimensions.', 'chapters': [{'end': 180.927, 'start': 0.089, 'title': 'Understanding css units', 'summary': 'Discusses the 15 css units supported by browsers, categorizing them into absolute and relative lengths, and explains relative lengths like percentages and their impact on parent-child dimensions and grid systems.', 'duration': 180.838, 'highlights': ['The chapter explains the 15 CSS units supported by browsers, categorizing them into absolute and relative lengths.', 'It details relative lengths like percentages and their impact on parent-child dimensions and grid systems.', "It provides examples of how percentages work in relation to their parent's dimensions and how they can be used to create grid systems.", "The chapter also addresses issues like child elements breaking outside their parent's dimensions and provides a quick fix using box sizing."]}, {'end': 351.95, 'start': 181.268, 'title': 'Viewport units in css', 'summary': 'Explains the concept of viewport units in css, including vw, vh, vmin, and vmax, which allow elements to be sized relative to the browser viewport dimensions, with vw and vh dividing the viewport into a grid of 100 units and vmin and vmax referencing the minimum or maximum dimensions of the viewport.', 'duration': 170.682, 'highlights': ['Viewport units (VW and VH) divide the viewport into a grid of 100 units. VW and VH divide the viewport into a grid of 100 units, allowing elements to be sized relative to the width and height of the browser viewport.', "Elements can be sized exactly as a percentage of the viewport width or height using VW and VH. By declaring an element's width or height as a specific number of VWs or VHs, it can be sized exactly as a percentage of the viewport width or height.", 'Vmin and Vmax reference either the height or the width, depending on which is the smallest or largest dimension of the viewport. Vmin and Vmax reference the minimum or maximum dimensions of the viewport, allowing elements to be sized relative to the smallest or largest dimension of the viewport.', 'The concept of Vmin and Vmax is demonstrated through a practical example of resizing the browser viewport. A practical example is provided to demonstrate how Vmin and Vmax work, showing how elements respond to the smallest or largest dimension of the browser viewport when the viewport is resized.']}], 'duration': 351.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY89.jpg', 'highlights': ['The chapter explains the 15 CSS units supported by browsers, categorizing them into absolute and relative lengths.', 'It details relative lengths like percentages and their impact on parent-child dimensions and grid systems.', 'Viewport units (VW and VH) divide the viewport into a grid of 100 units, allowing elements to be sized relative to the width and height of the browser viewport.', 'Elements can be sized exactly as a percentage of the viewport width or height using VW and VH.']}, {'end': 1006.048, 'segs': [{'end': 398.673, 'src': 'heatmap', 'start': 370.603, 'weight': 5, 'content': [{'end': 374.445, 'text': 'There are four sizes that are based on the currently declared font.', 'start': 370.603, 'duration': 3.842}, {'end': 377.568, 'text': "EX and CH is the one we're going to look at right now.", 'start': 374.886, 'duration': 2.682}, {'end': 380.469, 'text': "They're I've never used these before, but let me tell you about them.", 'start': 377.848, 'duration': 2.621}, {'end': 381.669, 'text': "First, let's talk about EX.", 'start': 380.649, 'duration': 1.02}, {'end': 388.691, 'text': "EX is based on the height of the X of the font family that you're using right?", 'start': 381.869, 'duration': 6.822}, {'end': 389.871, 'text': 'Now, why would they use the X?', 'start': 388.851, 'duration': 1.02}, {'end': 393.052, 'text': 'This is the typographic choice that goes back from a long time.', 'start': 389.951, 'duration': 3.101}, {'end': 396.392, 'text': 'The X is kind of a boxy character.', 'start': 393.212, 'duration': 3.18}, {'end': 398.673, 'text': "It doesn't have any ascenders or descenders ever.", 'start': 396.472, 'duration': 2.201}], 'summary': 'The transcript discusses two font size units, ex and ch, based on the x height and character width.', 'duration': 28.07, 'max_score': 370.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY370603.jpg'}, {'end': 565.146, 'src': 'heatmap', 'start': 516.076, 'weight': 0.823, 'content': [{'end': 522.597, 'text': 'So if you took this zero and kind of put it on its side, it would fit in the height of that blue line.', 'start': 516.076, 'duration': 6.521}, {'end': 524.505, 'text': "Let's move on.", 'start': 524.005, 'duration': 0.5}, {'end': 526.687, 'text': "We're gonna talk about rems and ems.", 'start': 524.525, 'duration': 2.162}, {'end': 529.909, 'text': 'Rems and ems actually get used a whole heck of a lot.', 'start': 527.147, 'duration': 2.762}, {'end': 534.392, 'text': 'Now, em and rem are not based on any specific character inside of the font.', 'start': 530.009, 'duration': 4.383}, {'end': 537.794, 'text': "In fact, they're not based on the font you have at all.", 'start': 535.232, 'duration': 2.562}, {'end': 541.957, 'text': "So if you change the font family in the middle of your layout, it's not gonna break the layout.", 'start': 537.814, 'duration': 4.143}, {'end': 546.833, 'text': "but it's based on a different font attribute, the font size.", 'start': 542.95, 'duration': 3.883}, {'end': 555.199, 'text': "So in this example, I have a class of m here, this div, and I've set the font size to 10px for the example, the parent.", 'start': 547.213, 'duration': 7.986}, {'end': 557.74, 'text': "And then I've set the width and the height to 1m.", 'start': 555.519, 'duration': 2.221}, {'end': 560.502, 'text': 'So when we come over here, there should be a little blue box here.', 'start': 558.081, 'duration': 2.421}, {'end': 565.146, 'text': 'And if I inspect it, we can see that its dimension is 10px by 10px.', 'start': 561.043, 'duration': 4.103}], 'summary': 'Em and rem units are not font-based, adapt with font size, demonstrated 10px by 10px.', 'duration': 49.07, 'max_score': 516.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY516076.jpg'}, {'end': 555.199, 'src': 'embed', 'start': 524.525, 'weight': 2, 'content': [{'end': 526.687, 'text': "We're gonna talk about rems and ems.", 'start': 524.525, 'duration': 2.162}, {'end': 529.909, 'text': 'Rems and ems actually get used a whole heck of a lot.', 'start': 527.147, 'duration': 2.762}, {'end': 534.392, 'text': 'Now, em and rem are not based on any specific character inside of the font.', 'start': 530.009, 'duration': 4.383}, {'end': 537.794, 'text': "In fact, they're not based on the font you have at all.", 'start': 535.232, 'duration': 2.562}, {'end': 541.957, 'text': "So if you change the font family in the middle of your layout, it's not gonna break the layout.", 'start': 537.814, 'duration': 4.143}, {'end': 546.833, 'text': "but it's based on a different font attribute, the font size.", 'start': 542.95, 'duration': 3.883}, {'end': 555.199, 'text': "So in this example, I have a class of m here, this div, and I've set the font size to 10px for the example, the parent.", 'start': 547.213, 'duration': 7.986}], 'summary': 'Rems and ems are widely used for font sizes, independent of font family, based on font size attribute.', 'duration': 30.674, 'max_score': 524.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY524525.jpg'}, {'end': 767.479, 'src': 'embed', 'start': 739.464, 'weight': 1, 'content': [{'end': 744.829, 'text': "So these REMs here are not affected by how I mess with the parent's font size.", 'start': 739.464, 'duration': 5.365}, {'end': 748.252, 'text': "So in effect, they're a little bit easier to wrangle.", 'start': 745.389, 'duration': 2.863}, {'end': 751.515, 'text': 'What they are affected by is that root font size.', 'start': 748.792, 'duration': 2.723}, {'end': 752.756, 'text': "And also they don't cascade.", 'start': 751.715, 'duration': 1.041}, {'end': 759.762, 'text': "So even so they're inside each other like the M's were, they're not basing the new REM off of what its parent was.", 'start': 752.796, 'duration': 6.966}, {'end': 761.383, 'text': "They're always going to remain the same.", 'start': 759.782, 'duration': 1.601}, {'end': 767.479, 'text': 'So REMs are used a lot in responsive design grids when you want to change everything at once.', 'start': 761.564, 'duration': 5.915}], 'summary': 'Rems are independent of parent font size, not cascading, and used in responsive design grids.', 'duration': 28.015, 'max_score': 739.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY739464.jpg'}, {'end': 899.331, 'src': 'embed', 'start': 860.824, 'weight': 3, 'content': [{'end': 866.287, 'text': "I don't know if you knew that or not, but when you're selecting points in your word processor,", 'start': 860.824, 'duration': 5.463}, {'end': 869.689, 'text': "you're actually talking about physical dimensions of the printed example.", 'start': 866.287, 'duration': 3.402}, {'end': 872.131, 'text': 'A point is 1 72nd of an inch.', 'start': 869.91, 'duration': 2.221}, {'end': 872.831, 'text': "It's really small.", 'start': 872.171, 'duration': 0.66}, {'end': 875.473, 'text': "So when you say three points, that's why it's the smallest one here.", 'start': 873.051, 'duration': 2.422}, {'end': 880.696, 'text': 'And a pica is 12 points, or in other words, a sixth of an inch.', 'start': 875.893, 'duration': 4.803}, {'end': 886.24, 'text': "Points and picas are measurements used by typesetters back in the day and they've just kind of worked their way into CSS,", 'start': 881.016, 'duration': 5.224}, {'end': 892.425, 'text': 'because you might use these measurements more in a print style sheet or something like that.', 'start': 886.24, 'duration': 6.185}, {'end': 894.467, 'text': 'And the last absolute dimension is pixels.', 'start': 892.505, 'duration': 1.962}, {'end': 896.649, 'text': 'Pixels you should be already familiar with.', 'start': 894.727, 'duration': 1.922}, {'end': 898.55, 'text': 'Pixels are awesome.', 'start': 897.149, 'duration': 1.401}, {'end': 899.331, 'text': 'The pixels.', 'start': 898.69, 'duration': 0.641}], 'summary': 'Points are 1/72nd of an inch, picas are 12 points, and pixels are widely used in css.', 'duration': 38.507, 'max_score': 860.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY860824.jpg'}, {'end': 951.658, 'src': 'embed', 'start': 921.506, 'weight': 0, 'content': [{'end': 924.948, 'text': 'They are the canonical measurement of the web.', 'start': 921.506, 'duration': 3.442}, {'end': 929.17, 'text': "You'll find the idea of pixels across all devices and in all stacks.", 'start': 925.008, 'duration': 4.162}, {'end': 933.571, 'text': 'And in fact, other links map directly to pixels.', 'start': 929.81, 'duration': 3.761}, {'end': 939.774, 'text': 'You notice that when I inspected element on a lot of the examples that I was showing you today, they all rendered in pixels.', 'start': 933.611, 'duration': 6.163}, {'end': 941.995, 'text': 'JavaScript talks in pixels.', 'start': 940.194, 'duration': 1.801}, {'end': 946.156, 'text': 'So for that reason, pixels are kind of the most commonly used CSS units.', 'start': 942.215, 'duration': 3.941}, {'end': 951.658, 'text': "And right here, we have exactly what you would imagine it to be, a box that's 200 pixels wide.", 'start': 946.376, 'duration': 5.282}], 'summary': 'Pixels are the universal measurement in web design, commonly used in css units and javascript.', 'duration': 30.152, 'max_score': 921.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY921506.jpg'}], 'start': 352.691, 'title': 'Understanding css units', 'summary': 'Explains the different absolute dimensions used in css such as inches, centimeters, millimeters, points, picas, and pixels, highlighting their physical measurements, historical use, and prevalence as the most commonly used css unit.', 'chapters': [{'end': 524.505, 'start': 352.691, 'title': 'Font relative links and their visual impact', 'summary': 'Introduces the concept of font relative links, including ex and ch sizes, explaining their visual impact and usage, with a focus on the x height and zero width, showcasing the variations in pixel rendering based on font family styles.', 'duration': 171.814, 'highlights': ['The concept of EX and CH sizes is explained, with a focus on the X height and zero width, showcasing the variations in pixel rendering based on font family styles. The chapter delves into the concept of EX and CH sizes, emphasizing the visual impact of X height and zero width, and how pixel rendering varies based on font family styles, with examples showing different pixel heights for serif and sans serif font families.', 'The visual impact of font size changes on the height of the multiplied blue box is demonstrated, illustrating the impact of font size adjustments on the X height. The chapter visually demonstrates the impact of font size changes on the height of the multiplied blue box, highlighting how adjustments in font size affect the X height, with clear visual examples showcasing the impact of font size adjustments on the rendered height.', 'The explanation of CH size, based on the width of the zero element, is provided, offering insights into its usage and relevance in font styling. The chapter provides an explanation of CH size, highlighting its basis on the width of the zero element and offering insights into its usage and relevance in font styling, providing clarity on the concept and its practical application.']}, {'end': 819.552, 'start': 524.525, 'title': 'Understanding rems and ems in css', 'summary': 'Discusses the usage and behavior of rems and ems in css, highlighting that 1m is equal to 10px, and how rems are based on the root element and are useful in responsive design.', 'duration': 295.027, 'highlights': ['1m is equal to 10px 1m is equivalent to 10 pixels, demonstrating the relationship between em and pixels in CSS.', 'REMs are based on the root element and are useful in responsive design REMs are not affected by parent font size and are utilized in responsive design grids to change layout dimensions uniformly.', 'EMs cascade and multiply in size EMs exhibit cascading behavior and multiply in size based on their parent elements, potentially leading to layout inconsistencies.']}, {'end': 1006.048, 'start': 819.892, 'title': 'Understanding css units', 'summary': 'Explains the different absolute dimensions used in css such as inches, centimeters, millimeters, points, picas, and pixels, highlighting the physical measurements of points, the historical use of picas, and the prevalence of pixels as the most commonly used css unit.', 'duration': 186.156, 'highlights': ['Pixels are the most commonly used CSS units due to their prevalence across all devices and stacks, and are not based on the viewport width or another font size, making them the canonical measurement of the web.', 'The physical measurement of points is 1 72nd of an inch, making it the smallest absolute dimension in CSS.', 'Picas, equivalent to 12 points or a sixth of an inch, are historical measurements used by typesetters that have been integrated into CSS.', 'The chapter also mentions the use of inches, centimeters, and millimeters as absolute dimensions in CSS that are great for printing purposes.']}], 'duration': 653.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qrduUUdxBSY/pics/qrduUUdxBSY352691.jpg', 'highlights': ['Pixels are the most commonly used CSS units due to their prevalence across all devices and stacks, and are not based on the viewport width or another font size, making them the canonical measurement of the web.', 'REMs are based on the root element and are useful in responsive design REMs are not affected by parent font size and are utilized in responsive design grids to change layout dimensions uniformly.', 'EMs cascade and multiply in size EMs exhibit cascading behavior and multiply in size based on their parent elements, potentially leading to layout inconsistencies.', 'The physical measurement of points is 1 72nd of an inch, making it the smallest absolute dimension in CSS.', 'Picas, equivalent to 12 points or a sixth of an inch, are historical measurements used by typesetters that have been integrated into CSS.', 'The concept of EX and CH sizes is explained, with a focus on the X height and zero width, showcasing the variations in pixel rendering based on font family styles.']}], 'highlights': ['Pixels are the most commonly used CSS units due to their prevalence across all devices and stacks, and are not based on the viewport width or another font size, making them the canonical measurement of the web.', 'Viewport units (VW and VH) divide the viewport into a grid of 100 units, allowing elements to be sized relative to the width and height of the browser viewport.', 'The chapter explains the 15 CSS units supported by browsers, categorizing them into absolute and relative lengths.', 'Covers 15 css units, categorizing them into absolute and relative lengths, explaining their impact on dimensions and grid systems.']}