(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{423:function(e,t,s){e.exports=s.p+"assets/img/pixels.36b99c3b.jpg"},573:function(e,t,s){"use strict";s.r(t);var o=s(56),i=Object(o.a)({},(function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[o("h1",{attrs:{id:"basic-css-units"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#basic-css-units"}},[e._v("#")]),e._v(" Basic CSS Units")]),e._v(" "),o("p",[e._v("So far we've mostly been using pixels to specify sizes, but in practice, pixels are not a great option for most use cases.")]),e._v(" "),o("p",[e._v("We actually have a wealth of different unit types in CSS, from pixels and percentages, to centimetres and inches. The latter generally being used for styling print documents.")]),e._v(" "),o("p",[e._v("In this lecture we'll cover a few of the most important unit types for CSS.")]),e._v(" "),o("h2",{attrs:{id:"pixels-px"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#pixels-px"}},[e._v("#")]),e._v(" Pixels ("),o("code",[e._v("px")]),e._v(")")]),e._v(" "),o("p",[e._v("In terms of hardware, a pixel is a single light-emitting unit capable of displaying full colour independent of its neighbours. You screen is made up of millions of such units, and we can see them with the naked eye if we look closely enough.")]),e._v(" "),o("p",[o("img",{attrs:{src:s(423),alt:"Image of screen showing visible pixels"}})]),e._v(" "),o("p",[e._v("A pixel in CSS doesn't quite correspond to these device pixels which make up your screen. Instead, there's a degree of scaling involved to ensure that devices with a high pixel density display objects at an appropriate size.")]),e._v(" "),o("p",[e._v("Take an iPhone 11 Pro, for example. An iPhone 11 Pro has a whopping device resoluton of "),o("code",[e._v("2436 x 1125")]),e._v(", but in CSS pixels, the device is only "),o("code",[e._v("812 x 375")]),e._v(": a third of the device values.")]),e._v(" "),o("p",[e._v("This isn't something we usually have to worry about, but we should keep this concept in mind for when we start talking about responsive design.")]),e._v(" "),o("h2",{attrs:{id:"percentages"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#percentages"}},[e._v("#")]),e._v(" Percentages ("),o("code",[e._v("%")]),e._v(")")]),e._v(" "),o("p",[e._v("Percentages are generally used to set values relative to a parent element. For example, setting a width of "),o("code",[e._v("50%")]),e._v(" on a valid element will set it to "),o("code",[e._v("50%")]),e._v(" of the width of its parent.")]),e._v(" "),o("div",{staticClass:"custom-block warning"},[o("p",{staticClass:"custom-block-title"},[e._v("Not everything can have a width!")]),e._v(" "),o("p",[e._v("Remember that elements which are being displayed inline ignore any width values set for them.")])]),e._v(" "),o("p",[e._v("In some cases, the percentage value is relative to the element itself. For example when using the "),o("code",[e._v("transform")]),e._v(" property to translate an element to a new position.")]),e._v(" "),o("p",[e._v("Percentages can be used with the "),o("code",[e._v("border-radius")]),e._v(" property to create effects we can duplicate with things like pixels. Take a look at "),o("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Examples",target:"_blank",rel:"noopener noreferrer"}},[e._v("some examples on the MDN"),o("OutboundLink")],1),e._v(".")]),e._v(" "),o("h2",{attrs:{id:"em-and-rem"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#em-and-rem"}},[e._v("#")]),e._v(" "),o("code",[e._v("em")]),e._v(" and "),o("code",[e._v("rem")])]),e._v(" "),o("p",[o("code",[e._v("em")]),e._v(" and "),o("code",[e._v("rem")]),e._v(" are units you've likely never encountered before, but you're going to be getting very familiar with them when working with CSS. They're the most common unit types I personally use.")]),e._v(" "),o("p",[e._v('The term "em" comes from typography, and historically it was the width of an uppercase "M" character. However, this was really more of an accident, as "M" character was traditionally the same width as the point size of the font. This is generally no longer the case.')]),e._v(" "),o("p",[e._v("In modern typography, an em is defined as being the same as the point size of the font, and the same is true in CSS. This also translates to pixels, so if we have a font size of "),o("code",[e._v("16px")]),e._v(", then "),o("code",[e._v("1em")]),e._v(" is "),o("code",[e._v("16px")]),e._v(".")]),e._v(" "),o("p",[e._v("When working with "),o("code",[e._v("em")]),e._v(" units, the font size of the element where the unit is being used determines the size of "),o("code",[e._v("1em")]),e._v(". For example, if we have an element with a font size of "),o("code",[e._v("10px")]),e._v(", then "),o("code",[e._v("1em")]),e._v(" is considered to be "),o("code",[e._v("10px")]),e._v(" when used to size components of that element.")]),e._v(" "),o("p",[o("code",[e._v("rem")]),e._v(" stands for "),o("em",[e._v("root")]),e._v(" "),o("code",[e._v("em")]),e._v(", and is generally a far more useful unit. "),o("code",[e._v("rem")]),e._v(" uses the global font size to determine its size, which means that "),o("code",[e._v("rem")]),e._v(" units are consistent across our entire site.")]),e._v(" "),o("p",[o("code",[e._v("rem")]),e._v(" forms the cornerstone of modern responsive design, as we'll see shortly.")]),e._v(" "),o("h2",{attrs:{id:"viewport-units-vh-vw"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#viewport-units-vh-vw"}},[e._v("#")]),e._v(" Viewport units ("),o("code",[e._v("vh")]),e._v(", "),o("code",[e._v("vw")]),e._v(")")]),e._v(" "),o("p",[e._v("Viewport units are relatively easy to understand, and can be very useful.")]),e._v(" "),o("p",[o("code",[e._v("1vh")]),e._v(' is equal to 1% of the height of the "viewport", which is essentially the visible area of the website in the browser window.')]),e._v(" "),o("p",[o("code",[e._v("1vw")]),e._v(" is the corresponding value for the "),o("em",[e._v("width")]),e._v(" of the viewport.")]),e._v(" "),o("p",[e._v("We can set values greater than "),o("code",[e._v("100")]),e._v(" if we like, which will create some amount of horizontal or vertical scrolling.")])])}),[],!1,null,null,null);t.default=i.exports}}]);