In this article, we will dive deeper into the world of CSS units, which will allow us to find more flexible solutions for the layout of different elements in some situations.
Beginners in web-development used to limiting their toolbox to pixels (px) and percent (%) – which units are quite enough to solve simple tasks. But CSS is ready to offer us more!
Meet two interesting units based on the size of the font. When and why should they be used?
When creating an adaptive site, we always face the fact that text items of different gadgets must have different sizes: a title with 48px size will look ridiculous on the phone, just like the same with 28px on the big screen. Prescribing on each breakpoint a separate size – is just a waste of time and in this case it is very easy to make a mistake, as a result code would look very messy. EM is an alternative way to do it.
Element with style “front size: 2em” will have twice bigger size than it’s parent’s one. And now, to scale text items on your page, it’s enough to change the font size of one element. Just imagine how would your file media queries will reduce it’s space)! It is just irreplaceable thing for projects with a large number of pages, do you agree?
However, we are not limited only by the size of the text! There are whole grids based on em-ob (https://www.npmjs.com/package/css-em-grid)
Such global use is more likely to apply to small home projects, but it may be a useful practice to build indents based on these units. For example, a text section with paddings based on em-ob will scale the indents gradually, along with changing the font size.
However, the main advantage of em-ob (relativity) is at the same time their main problem and complexity. Each web developer should be careful using them at deep levels of nesting. Let’s look at the example:
Here all of the span elements have the same font-size. the font doubles its size every time because size is counted in relation to parent’s one.
There is a situation where this problem is not so clearly showed but you need to be careful anyway.
Also in our disposal is an analogue of em’s: rem. All rules are identical, despite of the fact that rem sets the size in relation to the root body element, not the parent. Our example using rem:
Here you can observe that the size of the span does not depend on the wrapper, but is calculated from the body font size.
Each adaptive site uses % in its implementation in any case. However, it is not always the best solution because % in CSS is a relative unit and is calculated in relation to the parent. And if the width rule works well with %, the height is much more problematic – you will not set the height until parent height will be strictly specified in px.
So what to do, if we want our element always occupy strictly 70% of the height of the screen? To do this, you can use vh – 1 its unit is exactly equal 1% of the height of the browser’s working area. Thus, “height: 70vh” will give us the desired result. For width, you can use vw – where one unit is 1% of width.
For example, to create a 100% header, you can use the code below
Where the min-height rule is added to give the header an opportunity to be large enough on phones in the horizontal orientation mode.
If vw / vh is based on the width and height of the working area, then vmin / vmax are their counterparts that assume the value of the maximum / minimum of width / height. For example, if the browser has a width of 1300px and a height of 800px, then 1vmin = 8px, and 1vmax = 13px.
These units are rarely used in practice but in some cases vmin / vmax can become a reasonable solution to the task!