The units are vw and vh. Absolute units

One article is not necessary.

1px (pixel)= 1/96 inch but not in CSS. 1 px in CSS is a dot on the user's screen, physical quantity which depends on the resolution of the device and on the distance from which a person looks at its surface ( mobile phone or TV). In whatever units of measurement we would not write the code, it is reduced to px.

1 em= to the parent's font-size value. Note that in the polygon below the yellow and brown blocks have different font-sizes, but the font size is the same.

16px * 1 = 16px // yellow 16px * 0.5 = 8px // green 8px * 2 = 16px // brown

1 rem= value of font-size (the root element of the document).

16px * 1 = 16px // yellow 16px * 0.5 = 8px // green 16px * 2 = 32px // brown

1 percent (1%)— value relative to the property value of the parent tag.

16px * 100% = 16px // yellow 16px * 50% = 8px // green 8px * 200% = 16px // brown

Decreasing the width of the parent also reduces the width of the element, but not its font.

1vw= 1% of window width. Decreasing the width of the window reduces the width, height, and font of the element. The font will not be scaled when pressing Ctrl + or Ctrl - .

1vh= 1% of window height. Decreasing the height of the window reduces the width, height, font of the element. The font will not be scaled when pressing Ctrl + or Ctrl - .

1vmin= 1vw or 1vh. The one that is smaller is chosen.

1vmax= 1vw or 1vh. The one that is larger is chosen.

font-size: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem ;

font-size: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem ;

font-size: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem ;

calc() function

Have you ever wanted to subtract pixels or ems from percentages? For example, in order to . Now it's possible. The calc() function allows you to implement mathematical expressions

Addition (character separated by spaces on both sides) - subtraction (character separated by spaces on both sides) * multiplication / division

Here's another good example, .

• 1
• 2
• 3
• 4

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 with four different units measurements. Which of these four units is best for the web? This is a question that has generated a variety of discussions and criticism. Finding a definitive answer is difficult because the question itself is complex.

Meet - units

So what's the difference?

Change 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 can be a simple matter, 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 preferred to be used for web document text.

"em" vs "%"

In the example above, we used percentages as the base font-size unit (in the body tag). If you change your font-size base unit from "%" to "em" (i.e. body (font-size: 1em;)) you, should not 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 resizes the text 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", vice versa, "em" is displayed much larger than "%". While many claim that the units in "em" scale as intended, in practice the text in "em" is scaled too sharply, with the smallest text becoming illegible on some machines.

Verdict

Winner: percent (%).

New ones have been added to CSS3 relative units measurements 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 outside the html.

Browser Support

IE: 9.0 other than 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. vh and vw units

tricks responsive web design based on the use of percentages. But the percentages are far from the best solution for each case, since they are calculated relative to the dimensions of the nearest parent element. So if you want to use the height and width of the browser window, it's better to use vh and vw units. For example, if the height of the browser window is 900px , then 1vh will be equal to 9px . Similarly, if the width of the browser window is 1600px , then 1vw will be equal to 16px .

1.1. Responsive fullscreen background image

Since the width of the element specified with 100vw is greater than the width of the viewport, it is better to use a width of 100% to create full screen background images, 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 fullscreen background image

1.2. full page slide effect

To make the block fill 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, it is necessary to set the appropriate values ​​for each DOM element. The vh unit does not need to be chained, as its value is calculated directly relative to the browser window:

Section (height: 100vh; )

The effect of flipping slides when clicking 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 given with vh can also be used to align an element to the center of the page.

From the author: several years have passed since the first showing of viewport units in CSS. These are really adaptive length units, their value changes according to the size of the browser window. If you have heard of them but never went into the details, this article is for you.

Units of measurement and their meaning

There are 4 types of viewport units in CSS: vh, vw, vmin and vmax.

Viewport height (vh) - Based on the height of the viewport. The 1vh value is equal to 1% of the viewport height.

Viewport width (vw) - Based on the viewport width. The value of 1vw is 1% of the viewport width.

Viewport minimum (vmin) - based on the minimum side of the viewport. If the viewport's height is less than its width, 1vmin will be equal to 1% of the height. Similarly, if the width is less than the height, then 1vmin will be equal to 1% of the viewport width.

Viewport maximum (vmax) - based on the large side of the viewport. If the viewport height is greater than the width, then the value of 1vmax will be equal to 1% of the viewport height. If the viewport's width is greater than its height, then 1vmax will be equal to 1% of the width.

Let's see what values ​​we get in different situations:

If the viewport is 1200px wide and 1000px high, then 10vw will be 120px and 10vh will be 100px. The viewport's width is greater than its height, so 10vmax will be 120px and 10vmin will be 100px.

If we rotate the device so that the width is 1000px and the height is 1200px, then 10vh will be 120px and 10vw will be 100px. Interestingly, 10vmax will still be 120px, because now the value is determined by the height of the viewport. The 10vmin value will also remain 100px.

If we shrink the browser window to 1000px wide and 800px high, then 10vh will be 80px and 10vw will be 100px. Similarly, 10vmax will become 100px, and 10vmin will become 80px.

On this moment viewport units for you may not differ much from percentages, but the difference is large. In the case of percentages, the width and height of child elements depend on the parent block. Example:

The demo shows how the width of the first child element occupies 80% of the width from the parent. The second child element has a width of 80vw, making it wider than the parent.

Applying Viewport Units

These units are based on the size of the viewport, so they are very useful in situations where the width, height, or dimensions of elements need to change depending on the size of the viewport.

Full screen background images and sections

On the web, it is quite common to see background images on elements that take up the entire screen. You can do the same in website design so that a separate section about a product or service takes up the entire screen. In such cases, you can set the width of the elements to 100% and the height to 100vh.

Let's analyze the following HTML example: