Specify the units of measurement for character sizes. A Quick Guide to CSS Units

Units CSS dimensions are used to specify quantities in various properties. They are divided into absolute and relative.

Absolute units

Absolute units of measurement include centimeters (cm), millimeters (mm) and inches (in). Although they are designed to display elements on a web page uniformly, the browser cannot always accurately calculate the physical size of the display or monitor, so different devices elements may have different sizes.

One-cm ( font-size: 1cm; ) .one-mm ( font-size: 1mm; ) .one-in ( font-size: 1in; )

Typically, these units of measurement are used when specifying the size for printing pages.

Typographic units

Typographic units of measurement include points (pt) and peaks (pc). A point (1pt) is a fixed size of 1/72" while a pica (1pc) is 1/6" (1pc = 12pt). These two units of measurement are most useful in styles written for printed documents rather than for use on screens.

One-point ( font-size: 1pt; ) .one-pica ( font-size: 1pc; )

Relative units

Relative units of measurement include pixels (px) and percentages (%). A percentage is a unit of measurement that has nothing directly to do with the font size of an element or the size of the element itself. The value of a property set as a percentage directly depends on the value of the same property set for parent element. For example, font size is set relative to the font size of the parent element, and height and width are expressed as a percentage relative to the height and width of the parent element's content area.

One-pixel ( font-size: 1px; ) .one-percent ( font-size: 1%; )

Pixel is a point equal to one physical pixel on the screen. However, browsers do not always accurately calculate the size of the viewport in pixels.

Let's consider latest models laptops, tablets and smartphones equipped with screens with high resolution. On such devices, the browser does not correlate the px unit with the number of physical pixels on the screen. Instead, it normalizes the px unit to bring the viewing experience closer to that of a traditional desktop monitor, with pixel densities ranging from 96 to 120 pixels/inch. As a result, a square with a side of 10px can be drawn by the browser on a smartphone so that there are from 15 to 20 physical pixels on each side. This means that px also happens to be a relative unit of measurement.

Font-dependent relative units

Two additional relative units of measurement are em and ex. Em is the height of the current font, ex is the height of the lowercase "x" character in the specified font.

One-ex ( font-size: 1ex; ) .one-em ( font-size: 1em; )

Like percentages, em is a common unit of measurement commonly used to set the font size for text on a web page.

CSS3 introduces two additional units of measurement: rem and ch. Rem - font size of the root element ( ), it can be used instead of em to prevent parent or ancestor font sizes from affecting the current element's font size.

One-rem ( font-size: 1rem; )

The unit ch is equal to the width of the zero (0) character in the element's font. Its use can be useful for determining the width of a field containing text, because 1ch roughly corresponds to one character.

The ch unit is only supported in Chrome 27+, Firefox 19+ and IE9. Rem is supported in Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ and Opera 11.6+.

Viewport Units

Viewport units include vw (width) and vh (height), which allow you to scale elements relative to the viewport, which is the visible part of the web page.

Width: 50vw; /* 50% of the viewport width */ height: 25vh; /* 25% of viewport height */

Two additional units are vmin and vmax, which specify the minimum or maximum value for the size of the viewport.

Width: 1vmin; /* 1vh or 1vw, whichever is smaller */ height: 1vmax; /* 1vh or 1vw, whichever is greater */

Relative viewport units are supported in Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ and Opera 15+.

Unit values

The values ​​do not have to be specified as integers; they can also be specified as decimals. Some properties also allow you to specify negative values ​​as values.

P ( font-size: 0.394in; ) /* decimal */ p ( margin: -1px; ) /* negative value */

Note that the declaration will not work if the unit of measure is preceded by a space, or if the unit of measure is not specified (except for a value of zero). If zero is used as the value, the unit of measurement can be omitted.

P ( font-size: 1ex; ) /* correct */ p ( font-size: 0; ) /* correct */ p ( font-size: 0ex; ) /* correct */ p ( font-size: 1 ex ; ) /* incorrect */ p ( font-size: 1; ) /* incorrect */

Whenever a CSS declaration contains an error, it is ignored by the browser, while the rest of the declaration continues to work.

One of the most confusing aspects CSS is the application font-size attribute for text scaling. Using CSS you can change the text size in the browser using four different units measurements. Which of these four units is best for the web? This is a question that has given rise to various discussions and criticisms. Finding a definitive answer is difficult because the question itself is complex.

Meet the units

1. "Ems" (em): "em" is a scalable unit that is used in web documents. "em" is equal to the current font-size, for example, if the font-size in the document is 12pt, 1em is equal to 12pt. "em" is scalable by nature, so 2em will equal 24pt, 0.5em will equal 6pt, etc. The use of "em" is becoming increasingly popular in web documents due to its scalability and ability to be usefully used in mobile devices Oh.
2. Pixels (px): “px” are fixed sized units that are used on screens (such as for reading on a computer screen). One pixel is equal to one dot on your computer screen (the smallest element of your screen's resolution). Many web designers use px in web documents to achieve a pixel-perfect representation of their site when displayed in a browser. One of the problems with using px is that these units do not allow for scaling for visually impaired readers or mobile devices.
3. Points (pt): "pt", traditionally used in print media (anything that needs to be printed on paper, etc.). One "pt" equals 1/72 of an inch. "pt", like "px", have a fixed unit size and cannot be scaled.
4. Percents (%): The percentage units are similar to "em" except for a few key differences. First, the current font-size is 100% (i.e. 12pt = 100%). By using "%", your text becomes fully scalable for mobile devices and user friendliness (accessibility).

So what's the difference?

It will be easy to understand the difference between font-size units once you see them in action. Typically, 1em = 12pt = 16px = 100%. When using these font sizes, let's see what happens when you increase base size font (using CSS selectors body) from 100% to 120%.

Changing Font-size from 100% to 120%.

As you can see, "em" and "%" increased the font size, while "px" and "pt" did not. Setting an absolute size for your text may be easy, but it's much better for your visitors to use scalable text that can be displayed on any device or machine. For this reason, the units "em" and "%" are preferable to use for web document text.

"em" vs "%"

We found out that the units “px” and “pt” are not in the best possible way are suitable for web documents, which forces us to use "em" and "%". In theory, the units "em" and "%" are identical, but in practice they have minor differences that are important to consider.

In the example above, we used percentages (in the body tag) as the basic font-size unit. If you change your base font-size unit from "%" to "em" (that is, body (font-size: 1em;)), you, should don't notice the difference. Let's see what happens when "1em" is our base unit, and when the client changes the "Font Size" in their browser settings (many browsers, such as Internet Explorer, have this option).

The font size when the client changes the text size in the browser.

When the text size is set to "medium" in the client browser, there is no noticeable difference between "em" and "%". However, if the parameter is changed, the difference becomes very large. When set to “Smallest”, “em” is much smaller than “%”, and when set to “Largest”, on the contrary, “em” is displayed much larger than “%”. And while many argue that the units in "em" scale as intended, in practice the text in "em" scales too dramatically, causing the smallest text to become illegible on some machines.

Verdict

In theory, "em" units are the new and upcoming font size standard on the web, but in practice, "%" units allow text to be displayed more consistently and conveniently for users. When changing client parameters, the text in "%" changed in reasonable proportions, which allows designers to maintain readability, accessibility, and design.

Winner: percent (%).

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 browser window width more width 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 element width specified with 100vw is larger than the viewport width, to create full-screen background images it is 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 flipping through the slides when you click on the arrow is implemented using small script jQuery:

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.

I mentioned new (relatively) units of measurement. These units are vw, vh, vmin and vmax, and are based on the browser viewport size. Their actual size changes as the browser viewport changes, making these units ideal for adaptive design. Although in my previous post I argued against using these units to specify font sizes, they can be very useful for working with layout elements.

Viewport units

Units viewport measurements are relative units, which means they cannot be measured objectively. Their size is determined by the size of the browser viewport. There are four units related to the viewport.

I'll focus on the first two since they are the most commonly used. In many cases viewport units(vh and vw) intersect with the percentages in terms of capabilities. However, each of them has its own strengths and weaknesses.

To summarize, it looks like this:

When dealing with width, % is better, and when dealing with height, vh is better.

Full page width elements: % > vw

As I already said, vw determines the size of the element based on the width of the viewport. However, browsers calculate the size based on the space for the scrollbar.

If the page width exceeds the viewport width, a scroll bar appears. However, in reality the width of the viewport is greater than the width of the html element

Viewport > html > body

So if you set the element's width to 100vw, the element will extend beyond the html and body. V in this example I made a red border around the html element and filled the sections with different colors.

Because of this nuance, it is better to make elements across the entire width of the page using percentages, rather than relying on the width of the viewport.

Full page height elements: vh > %

When creating elements that need to be the same height as the page, it's much better to use vh instead of percentages. Since the percentage size of an element is relative to its parent element, we can get the element's height equal height screen only if its parent element also occupies the entire height of the screen. This means that we must position the element as fixed in order to do html element parent, or resort to using some kind of hack.

Using vh to achieve this effect is quite simple:

Example ( height: 100vh; )

Regardless of how the .example element is nested, its dimensions can be set relative to the dimensions of the viewport. The scrolling problem will not bother us since most sites do not have a horizontal scrollbar

Here are some examples of how vh units can be used.

Full screen background images

A typical use of the vh unit is to create background image, which spans the entire height and width of the screen, regardless of device size. This is quite easy to do.

Bg ( position: relative; background: url("bg.jpg") center/cover; width: 100%; height: 100vh; )

In a similar way, we can create a “pages” effect by giving each section the dimensions of the viewport.

Section ( width: 100%; height: 100vh; )

We can use JavaScript to create the illusion of page turning.

$("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animate(( scrollTop: movePos ), 1000); ))

Folding image

Vh can also be used to control the size of an image within a page. For example, within the framework of an article. We want to make sure that any image will be shown in its entirety regardless of screen size.

We will need the following code

Img ( width: auto; /* Automatic width to be proportional to height */ max-width: 100%; /* No more than the width of the parent element */ max-height: 90vh; /* No more than the height of the viewport */ margin: 2rem auto; )

Browser support

Because these units are relatively new, there are still issues with certain browsers.

Here's how to solve them.

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 usually used for working with text. In table 1 lists the main relative units.

The em unit is changeable value, which 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 are 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 zero value(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.

×