Viewport units vs percentages. Units vh, vw, vmin, vmax
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 size 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 does not require chained values, since its value is calculated directly relative to the browser window:
Section ( height: 100vh; )
The effect of flipping through 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.
CSS3 has new units of measurement. (I think I already talked about this. eng) You've already heard about px, pt, em and the new rem. Let's look at a few more: vw and vh.
Often there are elements in a layout that are guaranteed to fit into the browser viewport. IN general case JavaScript is used for this. Let's check the size of the viewport and resize the elements accordingly. If the user resizes the browser window, the procedure is repeated.
Using vw/vh we can set the size of elements relative to the size of the viewport. The vw/vh units are interesting because 1vw is a unit equal to 1/100th of the viewport width. To assign an element a width equal to the viewport width, for example, you need to set width:100vw.
How it can be used
Lightboxes are a great candidate for using vw and vh as they are usually positioned relative to the viewport, however I find that position:fixed with top, bottom, left and right values is easier to use since you don't have to set the height and width at all.You can use the new units to set the sizes of elements that are in normal flow. For example, I can post screenshots on the page. The height of these screenshots should not exceed the height of the viewport. For this I can set maximum height images:
Img ( max-height:95vh; )
IN in this case I set the height to 95vh to leave some space around when they are on the screen.
Browser support
If rem is supported by almost all major browsers including IE9, then using vw and vh is worth holding off on. On this moment only supports them Internet Explorer 9.Units CSS dimensions play an important role in creating websites and setting the sizes of various elements. CSS values can be expressed as positive or negative numbers, although some properties only accept positive numbers. Numeric value accompanied by a two-letter abbreviation that represents the actual unit of length. For example, cm (centimeters), px (pixels) or em CSS. The exception to this rule is the value 0 (zero), which does not require a unit of measurement.
CSS units come in two types: absolute and relative.
Absolute length units in CSS
Absolute CSS units are not suitable for web design. They represent a digital representation of the results of measurements in the physical world and are independent of screen size and resolution. Absolute lengths with the same value may differ by different screens. This is caused by differences in screen DPI (dots per inch).
High-resolution screens have a higher DPI than lower-resolution screens, making images and text appear smaller. Absolute units are used to define styles in printing, where measurements occur in inches, points and pica.
Absolute units of length:
- cm (centimeters);
- mm (millimeters);
- in (inches);
- pc(peaks);
- pt(points);
- px (pixels).
Most absolute length units are useless on the Internet. The only exception is px. Pixels are relative units in relation to the resolution of screens. For printers and monitors with very high resolution one pixel in CSS equals several pixels on the screen, so the number of px per inch is around 96. A pixel is the smallest unit of measurement and is commonly used as a reference for others.
Relative length units in CSS
Relative units Length dimensions in CSS do not have fixed values. Their meanings depend on others set values or functions. They are more popular in web design because they make it easier to determine the size of an element. With their help, you can set the width, height, font size, etc. relative to other basic parameters.
Relative units depending on font
Font-specific relative units are referenced in advance set size font or font-family property value:
- ex (character x height);
- ch( character width zero (0));
- em unit in CSS (current element font height);
- rem ( root element font size).
ex
Defined as “ character height x of current font OR half 1 em" That is, the height of the lowercase letter x installed font. When you change the value of the font-family property, the ex unit changes.
ch
Equal to the width of the character 0 . This unit of measure also changes when the value of the font-family property changes.
em
The CSS em unit has a value equal to the font size of the body or parent element. For example, if the font size of a parent element is 30px, then a value of 1em will be calculated as 30px (30 x 1) for all child elements. The number does not have to be an integer. If in the example we replace 1em with 0.5, then the value will be 15px (30 x 0.5).
The em unit takes on the value of the parent tag. This can lead to undesirable results when using nested elements.
Let's say we have three nested elements. The first element (root) has a font size of 30px, and the two nested elements have a font size of 2em. The element nested within the root will have a font size calculated as 60px (30 x 2). And the element nested within it will have a font size calculated as 120px (60 x 2).
rem
rem is similar to CSS em , but its value always remains equal to the font size of the root element. The rem unit is useful when developing responsive websites because it allows you to scale the entire page by changing the font size in the HTML element.
Percentage length units based on viewport size
The viewing area is based on the width and height of the viewport and includes:
- vh( viewport height);
- vw( viewport width);
- vmin( smallest of (vw, vh));
- vmax ( greatest of (vw, vh)).
vw
This is the width of the viewport. 1vw is equal to 1/100 of the viewport width. A bit like percentages, except that the value remains the same for all elements regardless of the width of their parent elements. For example, if the window width is 1000px, then 1vw will be equal to 10px.
vh
Same as vw ( viewport width), only this unit of measurement depends on the height of the viewing area. 1vh is equal to 1/100 of the viewing height. For example, if the browser window height is 900px, then 1vh would be 9px.
vmin
Vmin is equal to 1/100 of minimum value between the height and width of the viewport. In other words, 1/100 of the side with the shortest length. For example, if the window dimensions 1200 by 800 pixels, then the vmin value will be 8px .
vmax
vmax is equal to 1/100 of the maximum value between the height and width of the viewport. In other words, 1/100 of the side with the longest length. For example, if the dimensions were 1200 by 800 pixels, then vmax is 12px .
Interest %
The distance specified as a percentage depends on the length of the parent element. For example, if a parent element is 1000px wide and its child is 50% of that value, then the width child element will be 500px .
BROWSER SUPPORT
em CSS, ex, px, cm, mm, in, pt, and pc
are supported in all browsers, including older versions of IE.
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 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 default browser 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.
When working with CCS, it is very easy to get stuck at some point, because sometimes even when working using a familiar method, it happens that new problems appear.
As the Internet grows, so does the demand for new solutions. And since you and I are web designers and front-end developers, we have no other choice but to be able to work with various options and be able to work well.
This means that we need to be able to work well even with those specific tools that are usually used very rarely, but there are situations when they are needed.
Today we would like to tell you about some CSS tools. Each of these tools is like a unit of measurement, such as pixels or ems, but you most likely did not know about them.
Let's start with something that looks like something you're probably already familiar with. The em unit is defined as the current font-size. So, if you, for example, set the font-size on the body element, then the em value of any lower element within the body will be equal to that font-size.
Here we wrote that the div's font-size will be 1.2em. This is 1.2 times larger than the font-size it inherited from, which was 14px. So the result is 16.8px.
However, what happens if you cascade em-defined font-sizes inside each other? In the next passage we apply the same CCS as above. Each div inherits font-size from its parent, giving us progressively larger font sizes.
While this may be appropriate in some cases, often we want to simply rely on a single metric for measurement. In this case we should use rem. The “r” in rem stands for “root”; it is equal to the font size set in the root element; in most cases it is an HTML element.
Html (font-size: 14px; ) div (font-size: 1.2rem; )
In all three divs from the previous example, the font can reach 16.8px.
5 points, Grid
Rem are useful for more than just font calibration. For example, we could base an entire grid system or UI library on the use of size HTML font root rem, and use their calculation in certain places. This would give us more predictable font calibration and calculations.
Container (width: 70rem; // 70 * 14px = 980px )
The concept of the idea is to allow our interface to be commensurate with the size of the content. Although it is not necessary that in every case it has the same meaning.
vh and vw
Responsive web design techniques rely heavily on the percentage rule. However CSS percentage is not always the best solution for every problem. CSS width is related to the closest element that contains the parent. What if we want to use viewport width or height instead of width original element? This is exactly what the vh and vw units help do.
The vh element is 1/100 the height of the viewport. For example, if the browser height is 900px, 1vh can be as high as 9px. Also if the viewport width is 750px, 1vw can reach 7.5px.
It seems that this rule can be used endlessly. For example, a very simple way to achieve using one single CSS strings full height or approximately full height slides can be:
Slide ( height: 100vh; )
Let's say you want to make a title that fills the entire width of the screen. To do this you need to set font-size to vw. This size will be comparable to the width of the browser.
vmin and vmax
While vh and vm are always related to the height and width of the viewport, vmin and vmax are also related to the maximum and minimum of that height and width, depending on which is smaller and which is larger. For example, if the browser has settings of 1100px wide and 700px high, 1vmin would be 7px and 1vmax would be 11px. However, if the width is set to 800px and the height to 1080px, then vmin will be 8px while vmax will be set to 10.8px.
In what cases can you use these values?
Imagine that you want an element that remains visible on the screen at all times. Using height and width, set by value vmin below 100 will allow you to achieve this. For example, a square element that touches at least two parts of the screen could be defined like this:
Box ( height: 100vmin; width: 100vmin; )
If you want a square that will cover the entire visible area of the viewport, use the same rules, except vmax.
Box ( height: 100vmax; width: 100vmax; )
The combination of these rules will allow you to use the size of your viewport very flexibly and with maximum productivity.
ex and ch
The units ex and ch, as well as em and rem, refer to the current font and font size. However, since they are based on font-specific measures, ex and ch also map to font-family, as opposed to em and rem.
The ch unit, or character unit, is defined as a "improved measure" of the width of the character 0. This concept has caused much debate, but the basic idea is that given a fixed-width font, a square with a width of N unit characters such as width: 40ch; can always contain a sequence of 40 characters in that particular font. While normal use This particular rule lies in the arrangement of braille, the possibilities for creativity here, of course, extend beyond these simple statements.
The ex unit is defined as "x-height of the current font OR one-second of em". Thex-height of this font - height lowercase letters x of that font. Most often, this is around the middle mark of the font.
There are many areas where such units can be used. Most often in the printing house. For example, the sup element, which acts as a superscript, can be added to the line using the appropriate position and final value 1ex. You can reset the bottom element in the same way. Browser errors are fixed by superscript- and subscript-specific vertical-align rules, but if you want more control, you can try the following:
Sup ( position: relative; bottom: 1ex; ) sub ( position: relative; bottom: -1ex; )
Conclusion
It's important to keep up with the development and spread of CSS, as well as learning about new tools and adding them to your skill list. Most likely, you will encounter problems that can be solved with the help of these units. Take your time and read the specification. Subscribe to updates from cssweekly. And of course, don't forget to subscribe to weekly updates and free tutorial videos on Tuts+!
