Another essential element for writing CSS: measurement units.
You can define percentages in your stylesheets.
For example, for font size, widths/heights respectively with width/height, they are often defined as a percentage of the page. This allows for correct display regardless of screen size.
If you set 50%, the width displays at 50% of the screen.
em is a relative CSS unit based on the default font size of the page.
And you have units defined in pixels.
Example:
table {
width: 90%;
cellpadding : 10px;
}In a CSS file, many properties coexist: fonts, colors, numerical values, etc. Some of them need to be associated with a unit, and this is where it can get confusing.
There are several types of units, and each one influences your site’s design in its own way. If you don’t know how to choose between “px”, “em”, or “vw”, then you’ve come to the right place.
Absolute units
There are CSS measurement units that are not influenced by any other dimension. Called absolute units, they are generally used to express a length, for example a padding or a font size.
The absolute units are as follows:
- Pixels (
px) - Inches (
in) - Centimeters (
cm) - Millimeters (
mm) - Picas (
pc) - Points (
pt)
Most of the time, you will only use pixels or points, but it is good to understand the relationship between these measurement units.
Remember that 1 in = 96 px, 1 cm = 37.8 px, and 1 mm = 3.78 px.
To illustrate absolute units, let’s take a concrete example. Consider the following CSS code:
.box { width: 150px; height: 150px; }
This means that the box element will have the same dimensions (150 x 150 pixels), regardless of the screen size.
Text-relative units
Unlike absolute units, there are units that vary the size of an element based on the font size or the parent element.
These text-relative units are increasingly used to harmonize design elements. They include:
em: proportional to the font size of the parent element or the document. By default, 1 em = 16 px if no font size is defined.rem: the rem unit always refers to the font size of the root element. In other words, it depends on the default font-size.ex: rarely used, this unit is relative to the height of the current font in lowercase.ch: this unit is also rarely used, it is relative to the width of the “0” character.
Among these text-relative units, you will often use em. This measurement unit helps keep text readable. Another advantage is that if you want to change your font size, your child elements will automatically adjust.
Viewport-relative units
Other units allow elements to adapt to the viewport size, that is, to the size of the browser window.
These viewport-relative units are essential for implementing a responsive design, and they include:
- Viewport height (
vh) - Viewport width (
vw) - Viewport minimum (
vmin) - Viewport maximum (
vmax)
The vh and vw units
The vh and vw units are similar, with the only difference being that they depend respectively on the height and width of the browser window.
Remember that 1 vh = 1% of the viewport height and 1 vw = 1% of the viewport width.
The vh measurement unit is generally used to allow an element to adapt to the full height of the window:
.box { height: 100vh; background: red; }
In this example above, the box element has a height of 100% relative to the browser window height.
Let’s take another example:
h1 { font-size: 6vw; }
Here the H1 heading size corresponds to 6% of the window width. Therefore, if the window is 1000 px wide, the font size will be 60 px.
The vmin and vmax units
These two CSS measurement units work on the same principle.
With vmin, the minimum dimension of the viewport is taken into account. For example, if the viewport is 1000 px tall by 800 px wide, elements using a vmin unit will adapt based on the window width.
With vmax, elements adapt based on the maximum dimension of the viewport. According to the previous example, 1 vmax = 10 px.
Percentage units
The percentage is part of relative units in general since it adapts based on its parent element.
Most of the time, this unit is used to define the height and width of an element. You will find it notably in the Bootstrap framework.
0 Comments