{"id":3765,"date":"2017-05-12T04:20:54","date_gmt":"2017-05-12T04:20:54","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=3765"},"modified":"2023-08-29T15:21:43","modified_gmt":"2023-08-29T15:21:43","slug":"03-measurement-units","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/03-measurement-units\/","title":{"rendered":"03 Measurement Units"},"content":{"rendered":"<p class=\"pat\">Measurements are used everywhere so get used to specifying both relative and absolute measurements. Absolute measurements use a fixed size while relative measurements are based on the size of the parents, the font specified in the body tag, or determined by the size of the viewport (window or device size).<\/p>\n<h2>Absolute Measurements<\/h2>\n<\/p>\n<p>You will often specify a width in pixels, such as <code>300px<\/code>. That is only natural. How long something is depends on the resolution of the screen. Yes, pixels are relative based on the screen resolution which changes all of the time in web design. However, Apple uses pixel doubling retina displays, to maintain the ideal pixel that hovers around 72 points per inch. Because pixels are the reference for thinking in terms of the display, they are used as an absolute measurement.\n<\/p>\n<p>Other fixed measurements are pica <code>pc<\/code>, point <code>pt<\/code>, millimeter <code>mm<\/code>, centimeter <code>cm<\/code> and inch <code>in<\/code>. They should update regardless of the display\u2019s resolution. An inch should be an inch.\n<\/p>\n<p>Keyword values are also common, like <code>bold<\/code> and <code>bolder<\/code> for the font-weight property. Other value for font weight are from 100 through 900 in multiples of 100. Font weights not available will map onto the closest available font.<\/p>\n<h3>Interactive CSS Selectors Demonstrations<\/h3>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre style=\"font-size: 65%;\">\r\n<style contenteditable=\"true\">\r\n#pixels { background: red; width: 300px;}\r\n#points { background: orange; width: 200pt;}\r\n#picas { background: yellow; width: 18pc;}\r\n#inches { background: green; width: 3in;}\r\n#centimeters { background: cyan; width: 7cm;}\r\n#millimeters { background: blue; width: 85mm;}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo w300\" id=\"measure-1\" style=\"\">\n<h3>Live Demo<\/h3>\n<style>\n.ltm {color: #aaa}\n#measure-1 li, #measure-2 li {padding: 2px 5px; margin-top: 3px;\n\tlist-style: none; border-left: 5px solid #000;}\n<\/style>\n<ul style=\"margin: 0; width: 100%; outline: 1px solid silver;}\">\n<li style=\"border-left: 5px solid hsla(0, 0%, 0%, .0);\"> <strong>Width in:<\/strong>\n<\/li>\n<li id=\"pixels\">  pixels (px) <\/li>\n<li id=\"points\"> points (pt) <\/li>\n<li id=\"picas\"> picas (pc) <\/li>\n<li class=ltm id=\"inches\">  inches (in) <\/li>\n<li id=\"centimeters\">  centimeters (cm) <\/li>\n<li class=ltm  id=\"millimeters\">  milimeters (mm) <\/li>\n<\/ul>\n<\/div>\n<h2>Relative Measurements<\/h2>\n<\/p>\n<p>Relative measurements are based on four sources: fonts, percentages, viewport, or container size.<\/p>\n<h4>Relative Measurements based on Fonts<\/h4>\n<\/p>\n<p>In the first years of web design, when a client changed the size of a web page, only the fonts would shrink or expand. To make all the elements on the page change along with the fonts, it was standard to measure everything relative to the size of the page font.  That length is expressed in <code>em<\/code> units, which is the width of the &#8220;m&#8221; of the font in question.  This could become problematic when a percentage of an em, of an em was specified, as the effects accumulated. To avoid this problem, they introduced the root em, or <code>rem<\/code>, which is based on the size given to the body tag.\n<\/p>\n<p>You can also express length in terms of the x-height of the font <code>ex<\/code> and the character <code>ch<\/code>. Character is mapped onto the width of the zero. <\/p>\n<h4>Relative Measurements Based on Percentages<\/h4>\n<\/p>\n<p>The most common relative measurement is percentage <code>%<\/code>. When applied to the weight of a child element, it becomes that percentage of the parent element. The parent element is <code>100%<\/code>. It is easy to build websites that automatically resize on most devices just by basing the elements on percentages. You still need to use media or container queries for very large and very small sizes. <\/p>\n<h4>Relative Measurements Based on Viewport<\/h4>\n<\/p>\n<p> With the introduction of mobile devices, it became common to base widths on the viewport: <code>vi<\/code> for viewport inline (this is the width of the browser window or the width of the device). <code>vb<\/code> is for viewport block. <code>vb<\/code> These are the <a href=\"https:\/\/www.smashingmagazine.com\/2018\/03\/understanding-logical-properties-values\/\">logical properties<\/a> for viewport width and <code>vw<\/code> and viewport height <code>vh<\/code>. You can also target the smallest or largest percentage that an object can be: <code>vmin<\/code> is for viewport minimum and <code>vmax<\/code> for viewport maximum.  Viewport minimum picks the shortest viewport size and viewport maximum chooses the longest viewport size. <code>1vi<\/code> is 1% of viewport width, <code>1vb<\/code> is 1% of viewport height, <code>1vw<\/code> is 1% of viewport width, <code>1vh<\/code> is 1% of viewport height, <code>1vmin<\/code> is 1vw or 1vh, whichever is smallest and <code>1vmax<\/code> is 1vw or 1vh, whichever is largest.\n<\/p>\n<p>These relative values should be used to accommodate changes in the viewport used to making fluid layouts.  Grid layout has a flexible measurement unit designed for fluid layouts, the fractional unit <code>fr<\/code>.   Fr stands for a unit that represents a fraction of the available space in the grid container.<\/p>\n<h2>Compare Measurements<\/h2>\n<\/p>\n<p>Relative sizes are based on the live demo width of 60% of the parent main element, or a font-size of 22px for the body element.\n<\/p>\n<p>This font-size is unusually large so as to make the text easier to read in class. Usual font-size is 16px. If you change it, the em, x-height based width will change accordingly. The fonts in the document will also change.\n<\/p>\n<p>If you change the window size, the last 6, viewport inline, block, width, height, vein, and max will all update in real-time. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre style=\"font-size: 65%;\">\r\n<style contenteditable=\"true\">\r\n#em { background: magenta; width: 10em;}\r\n#reference-em { background: purple; width: 10rem;}\r\n#x-height { background: red; width: 20ex;}\r\n#percentage { background: orange; width: 50%;}\r\n#viewport-inline { background: yellow; width: 20vi;}\r\n#viewport-width { background: silver; width: 20vw;}\r\n#viewport-block { background: green; width: 30vb;}\r\n#viewport-height { background: grey; width: 30vh;}\r\n#viewport-maxwidth { background: cyan; width: 20vmax;}\r\n#viewport-minwidth { background: blue; width: 40vmin;}\r\n\r\nbody {font-size: 22px;}\r\n#measure-2 ul {width: 100%; outline: 1px solid silver;}\r\n<\/style><\/pre>\n<\/div>\n<p><!\u2014\nh3 ul {container: Charley \/ inline-size}\n@container Charley (min-width: 700px){\n#viewport-inline {background: red;} \n}\n\u2014><\/p>\n<div class=\"live-demo w300\" id=\"measure-2\">\n<h3>Live Demo<\/h3>\n<ul style=\"margin: 0\">\n<li style=\"border-left: 5px solid hsl(0 0%  0% \/ .0);\"> <strong>Width in:<\/strong>\n<\/li>\n<li id=\"em\"> em (em)<\/li>\n<li style=\"color: #aaa\"  id=\"reference-em\">  reference em (rem) <\/li>\n<li id=\"x-height\">  x-height (ex)<\/li>\n<li id=\"percentage\">  percentage (%) <\/li>\n<li id=\"viewport-inline\"> % of the viewport inline (vi)<\/li>\n<li id=\"viewport-width\"> % of the viewport width (vw)<\/li>\n<li class=ltm  id=\"viewport-block\"> % of the viewport block (vb) <\/li>\n<li class=ltm  id=\"viewport-height\"> % of the viewport height (vh) <\/li>\n<li id=\"viewport-maxwidth\"> % of the viewport width (vmax)<\/li>\n<li class=ltm  id=\"viewport-minwidth\"> % of the viewport width (vmin)<\/li>\n<\/ul>\n<p>The viewport based measurements update when the window is resized. Em and x-height reflect the body font-size.\n<\/p>\n<\/div>\n<p><ul>Measurements for container queries have their own syntax (not demonstrated here).\n<\/ul>\n<ul>\n<li>cqw (Container Query Width) \u2013 1% of the container\u2019s width\n<\/li>\n<li>cqh (Container Query Height) \u2013 1% of the container\u2019s height\n<\/li>\n<li>cqi (Container Query Inline) \u2013 1% of the container\u2019s inline size\n<\/li>\n<li>cqb (Container Query Block) \u2013 1% of the container\u2019s block size\n<\/li>\n<li>cqmin (Container Query Minimum) \u2013 the smaller value of cqi and cqb\n<\/li>\n<li>cqmax (Container Query Maximum) \u2013 the larger value of cqi and cqb\n<\/li>\n<\/ul>\n<h2>CSS Calc<\/h2>\n<\/p>\n<p>CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (\/) to be used as component values. A useful feature of this function is the ability to mix units. For example, you can multiply pixels with percentage. You can also mix sizing units. CSS calc() can be used anywhere there\u2019s a css length or number in your stylesheet. <code>.item { width: calc(100% - 60px);}<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Measurements are used everywhere so get used to specifying both relative and absolute measurements. Absolute measurements use a fixed size while relative measurements are based on the size of the parents, the font specified in the body tag, or determined &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/03-measurement-units\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/3765"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=3765"}],"version-history":[{"count":45,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/3765\/revisions"}],"predecessor-version":[{"id":6079,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/3765\/revisions\/6079"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=3765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=3765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=3765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}