When working with CSS, there always comes a point when you begin to realize how powerful this or that tool is. Even though I have a pretty good understanding of the CSS em unit, I only really felt their power after reading Simurai's post. In this article I am going to use his experience.

What is em?

In CSS, the em unit is equal to the current font size of the element to which the em is applied. When em units are used in child elements who don't have certain size font, they inherit it from their parents, right down to the root element of the document.

Look at the following CSS code:

Example (font-size: 20px; )

IN in this case 1em of this element or its children ( in the absence of other font-size definitions) will be equal to 20px . So if we add the line:

Example ( font-size: 20px; border-radius: .5em; )

A border-radius value of 5em will be equal to 10px (that is, 20 * 0.5 ). Likewise:

Example ( font-size: 20px; border-radius: .5em; padding: 2em; )

The 2em padding value will be 40px (20 * 2 ). As mentioned, this type of calculation applies to any child element unless it has an explicitly defined font size. Then the CSS em unit value will be calculated in a similar way.

If the CSS does not specify a font size, then em will be the browser's default font size. Most often this value is 16px. Let's look at how you can use this method to easily resize elements.

Resizing Component Levels

The concept of “components” is quite popular now. It is well suited for modular CSS methods, and also for the idea of ​​encapsulated sections of code in general. And I imagine the next method will be even more interesting once web components gain widespread support.

The method works like this: it uses the font-size property, which creates a basic unit for the various elements within the module. Since the em unit is calculated based on the font-size of the parent element, this makes the entire component easily editable by changing the font-size property of the parent element.

Let's see this in action:

View demo

This module consists of four main elements. Move the slider at the top of the demo page to change the size of the module. You can view it if you want V full screen mode . The slider contains a single value for the component's root element: the font-size value.

It should be noted that setting the dimensions of a component after one CSS property optional, the user can change the size in the settings. This is done so that the developer can quickly make changes without going through different meanings in all parts of the component.

When the font size is changed, it affects all em CSS values ​​of the parent element, as well as all its children, making all parts of the component proportionally flexible.

Note that:

• Inside the component, all dimensions are specified using em . Apart from the outer border and the image, which can be changed if desired, but I am happy with the size, which in this case is static;
• Icon on the right top corner, which looks like a teardrop, is a pseudo-element that similarly uses the font size of its parent element;
• The CSS also includes two media queries that adjust the font size of the parent element. Which shows the usefulness of this method, because you do not need to change all sizes in media queries, but only the font size.

Some comments, omissions, etc..

As you can see from the example, this type of flexible resizing is not always what you should use. It can be somewhat limited.

You may need to tweak some of the em unit values ​​in the CSS. And as with the parent element's border in the example, you probably won't want to change the size. Because the property applies to all elements. You can solve this problem by simply escaping the ems of the elements you want to keep.

No need to use pixels to set the root font-size. You can use em for this, but remember that these units will be passed down from parents.

What about rem and Sass?

The rem unit in CSS always inherits the root element's font size value, regardless of the calculated font size. In HTML, the root element is . This way you can use rem. But this means that you will have to control all components on the page using the font size of that element. This may work in some projects, but I think this method works best when resizing separate component, not the entire document.

Regarding use Sass preprocessor, then this is a secondary issue. Ultimately, CSS will use whatever units are specified in the Sass code, and inheritance will work the same way.

Conclusion

I believe this good method for use when creating a CSS framework or component library. This method convincingly proves how a powerful tool is the unit of em in CSS.

The translation of the article “The Power of em Units in CSS” was prepared by the friendly project team.

There are several properties in CSS that take length (or distance) as values. These properties include the box model properties: width, height, margin, padding, border. But there are other properties, such as the offset and size of the shadow of the box-shadow property, or the size or spacing of the font. What length units are commonly used in CSS? There are many options.

Absolute units of length

Pixels px

.wrap (width: 400px; )

A pixel is perhaps best thought of as an "abstract quantity" since it has nothing to do with the physical pixel on your display.

CSS pixels- an abstract value used by browsers to accurately display content on pages, regardless of screen.

Pixels are the basic unit of measurement on the web, and since they are displayed almost uniformly, many lengths are calculated in pixels; the same javascript “talks” in pixels.

Inches in

.wrap (width: 4in; )

Inch (from Dutch duim - thumb) is a unit of distance in some European non-metric systems. In css, inches are simply mapped to pixels. However, it's worth noting that inches are very rarely used in CSS.

1in == 96px

Centimeters cm

.wrap (width: 20cm; )

A centimeter is a unit of length in various metric systems, equal to 0.01 meters. In css it also maps to pixels.

1cm == 37.8px

Millimeters mm

.wrap ( width: 200mm; ) 1mm == 0.1cm == 3.78px

Font-dependent units of measurement

Em

.wrap (width: 40em; )

Relative unit of measurement. In printing, additional units of measurement are used - one of them corresponds to width capital letter M. The main property that affects the font size is font-size.

Without any additional css rules 1em works like this:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

If you change the font size in a document, 1em becomes equal to the current (set) font size.

There are some seemingly strange things. If an element with a font-size of 1.1em is contained within an element with a font-size of also 1.1em , plus they share a common parent whose font-size is 1.1em , then the resulting font-height of the nested element itself will be 1.1 X 1.1 X 1.1 == 1.331em . That is, you must take into account the following: when you assign a font size to an element equal to, for example, 10em , this does not mean at all that wherever you put the element, its font will be equal to 10em . It all depends on the context (see the evidence).

Rem

.wrap (width: 40rem; )

Rems offer best alternative em s. They work almost the same except for one thing key difference: rem units always refer to fixed base value, namely - with the font size of the root element of the document (in case HTML it is always an html element).

Incomplete browser support: does not work in IE 8, Safari 4, or iOS 3.2.

Items

.wrap (width: 120pt; )

Points are a unit of measurement equal to 1/72 inches. Paragraphs are very common outside of CSS (which is probably why they are included in CSS).

Points are great for print, but there's nothing stopping you from using points on a website. Although it is worth noting that browsers do not always display items the same way.

Pike

.wrap (width: 12pc; )

Same story as with points, but 1pc == 12pt.

Ex

.wrap (width: 60ex; )

This unit of measurement is based on the x-height (lowercase) of the current font. Sometimes the x-height information is built into the font itself, sometimes the browser calculates this height by measuring the character's lowercase height, and in the worst case, the browser simply sets this height to 0.5em . To understand why x-height is used, imagine an ascender, such as lowercase letter d. X-height does not include this leader.

Unlike em s, which do not change when you change the font-family property, the units of ex will change when you change the value of the font-family property (proof).

Ch

.wrap (width: 60ch; )

Similar in spirit to x-height, but instead of x-height, a character width of 0 is used. Also changes when the value of the font-family property is changed.

Browser support: on this moment not supported by webkit-based browsers (safari, Yandex, chrome).

Percentage length units based on viewport size

Vw

.wrap (width: 10vw; )

This is the width of the device's viewing area. 1vw is equal to 1% viewport width. A bit like percentages, except that elements specified with vw units are no longer affected by the width of their parent elements.

Browser support: not supported by any mobile browser,except ios6. This applies to all relative viewport units.

Vh

.wrap (width: 10vh; )

Same as VW only this unit The measurement does not depend on the width, but on the height of the device's viewing area.

Vmin

.wrap (width: 20vmin; )

1vmin takes 1vw or 1vh, whichever is smaller. When determining the size standard font vmin can be much more useful than vh or vw .

Vmax

.wrap (width: 20vmax; )

1vmin takes 1vw or 1vh, whichever is greater.

Browser support: webkit-based browsers support vmin, but do not support vmax (yet). Firefox supports vmax.

Interest

.wrap (width: 50%; )

The distance specified as a percentage depends on the same property of the parent element. For example, if an element has a width of 450px and its child element has a width of 50%, then the width of the child element is 225px.

Technically percentages cannot measure length, but I have included percentages in this article, since length and percentages are interrelated.

New relative units have been added to CSS3 such as vh , vw , vmin , vmax . These units are calculated relative to the size of the browser window. For desktop computers The width of the browser window is larger than the width of the viewport (the width of the scrollbar is added), so if you set the width of the element to 100vw, it will go beyond the html.

Rice. 1. Full screen background image with width 100vw

Browser support

IE: 9.0 except vmax, use vm instead of vmin
Edge: 12.0 except vmax, use vm instead of vmin
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome for Android: 55.0

1. Units vh and vw

Techniques responsive web design are based on the use of percentage values. But the interest is far from The best decision for each case, since they are calculated relative to the dimensions of the nearest parent element. Therefore, if you want to use the height and width of the browser window, it is better to use vh and vw units. For example, if the browser window height is 900px, then 1vh will be 9px. Likewise, if the browser window width is 1600px, then 1vw will be 16px.

1.1. Responsive full screen background image

Since the width of the element specified with 100vw is greater than the width of the viewport, to create full-screen background images It's better to use a width of 100%, which will be equal to the width of the root html element.

Fullscreen-bg ( background: url(image.jpg); background-position: center; background-size: cover; width: 100%; height: 100vh; ) Rice. 2. Responsive full screen background image

1.2. Full page slide effect

To make a block the entire height of the browser window, you need to set height: 100%; for three elements - html, body and directly for the block itself:

Html, body ( height: 100%; ) section ( height: 100%; )

Since percentage sizes are calculated relative to the values ​​of the parent elements, you need to set the appropriate values ​​for each DOM element. The vh unit of measurement does not require chaining values, since its value is calculated directly relative to the browser window:

Section ( height: 100vh; )

The effect of scrolling through the slides when you click on the arrow is implemented using a small jQuery script:

JQuery(document).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window ).scrollTop() + $(window).height(); ) if ($(this).hasClass("top")) ( var movePos = $(window).scrollTop() - $(window).height( ); ) $("html, body").animate(( scrollTop: movePos), 600); )); ));

The height specified with vh can also be used to center an element on the page.

CSS uses absolute and relative units to size various elements. Absolute units are independent of the output device, but relative units define the size of an element relative to the value of another size.

Relative units

Relative units are usually used to work with text. In table 1 lists the main relative units.

The em unit is a mutable value that depends on the font size of the current element (the size is set via the font-size style property). Each browser has a built-in text size that is used when this size is not explicitly specified. Therefore, initially 1em is equal to the browser's default font size or the font size of the parent element. Percentage notation is identical to em , in that the values ​​of 1em and 100% are equal.

The ex unit is defined as the height of the lowercase "x" character. ex is subject to the same rules as em , namely that it is bound to the browser's default font size or to the font size of its parent element.

The ch unit is equal to the width of the "0" character for the current element and, like em, depends on the font size.

The difference between em and rem is as follows. em depends on the font size of the element's parent and changes with it, and rem is tied to root element, i.e. the font size specified for the html element.

There is also a group of relative units tied to the size of the browser viewport. In table 2 shows a list of them with a description.

Absolute units

Absolute units represent physical dimensions - inches, centimeters, millimeters, points, picas, and pixels. For devices with low dpi (the number of pixels per inch determines the pixel density), the binding is per pixel. In this case, one inch is equal to 96 pixels. Obviously, the real inch will not match the inch on such a device. On high DPI devices, the real inch is the same as the on-screen inch, so the pixel size is calculated as 1/96 of an inch. In table 3 lists the basic absolute units.

Example

30px header

Text size 1.5 em

24 point headline

Shift text to the right by 30 millimeters

Note

When setting dimensions, be sure to specify the units of measurement, for example width: 30px. Otherwise, the browser will not be able to show the desired result because it does not understand what size you require. Units are not added only when the value is zero (margin: 0).

Internet Explorer supports the vm unit instead of vmin .

Specification

Each specification goes through several stages of approval.

• Recommendation - The specification has been approved by the W3C and is recommended as a standard.
• Candidate Recommendation ( Possible recommendation ) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
• Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of a draft that has been discussed and amended for community review.
• Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
• Draft ( Draft specification) - the first draft version of the standard.

×

There are several basic units of measurement in CSS: relative and absolute. When working with CSS, you must clearly understand their use, otherwise working with cascading style sheets will be complex and incomprehensible. Absolute units of measurement are divided into 5 types, relative ones into 4. You should know that Absolute units of measurement do not depend on the output device, i.e. monitors and screens, while relative ones determine the size of an element relative to another size, i.e. monitor, screen, parent element, etc. Now more about them.

Relative units of measurement.

Relative units of measurement are usually used for working with text and in “expandable” layouts. The following table shows the basic relative units of measurement.

E.M.

The measured value depends on the font size of the current element (it is set via the font-size attribute). When it is not explicitly set, the text size set in the browser is used. Therefore, 1em is initially equal to the default font size in the browser.

EX

This argument is defined as the height of the lowercase "x" character. Ex is bound to the default font size set in the browser; if the parent element has the “font-size” attribute set, then it is bound to it.

PX

A pixel is 1 point of resolution of an output device (monitor or screen). Those. If your monitor resolution is 1024*768 then you have 1024 pixels horizontally and 768 pixels vertically. Those. The pixel size directly depends on the resolution of the output device and its technical characteristics.

%

The percentage unit of measure depends on the dimensions of the parent element.

Absolute units of measurement.

Absolute units of measurement are used less often and mostly when working with text. The following tables show absolute units of measurement.

Of these units, only pt (point) should be described, because pc is a derivative of pt and the use of in, cm and mm does not need to be described.

The point is the most common and widely used unit of measurement for fonts (remember how they set the font size in Word or Open Office?).