About the use of Windows units and percent units in CSS

This article mainly describes the CSS in the window units and percentage of the use of units, is the basic knowledge of CSS primer learning, the need for friends can refer to the following

Windows (Viewport) units

Windows (Viewport) units are relative units, meaning they have no objective dimensions. Their size is determined by the size of the window (Viewport). Here are four units related to Windows (Viewport).

I will focus on the first two units as they are more likely to be used.

In many cases, viewport units (VH and VW) and percent units overlap in the functionality they can achieve. However, each of them has its own obvious advantages and disadvantages. In summary, say:

When the width is processed, the% unit is more appropriate. When handling heights, VH units are better.

Full-width elements:% > VW

As I mentioned, the VW unit determines its size depending on the width of the window. However, the browser calculates the window size, including the space of the scroll bar, based on the browser's windows.

If the page extends beyond the height of the viewport-the scroll bar appears-the width of the window will be greater than the width of the HTML element.

Viewport > HTML > Body

Therefore, if you set an element to 100VW, this element will extend beyond the bounds of the HTML and body elements. In this example, I wrap the HTML element with a red border and then set the background color for the section element.

Because of this subtle difference, when an element spans the width of the entire page, it is preferable to use a percentage unit rather than the width of the viewport.
Elements full height: vh >%

On the other hand, when an element spans the height of the entire page, VH is far better than the percent unit.

Because the size of the element defined in percent is determined by its parent element, only the parent element fills the height of the screen, and we have an element that fills the height of the entire screen. This usually means that we have to position the element as fixed, in order to make the element's parent element an HTML element, or to rely on some program.

In the case of VH, however, it is as simple as the following:

. example {     height:100vh;   }

Regardless of how the. Example element is nested, it is also able to set the size relative to the window size. The problem with ScrollBars is also not a problem, because most pages now usually do not have horizontal scrollbars.

Here are some examples of how we can easily create some designs using VH units.
Full-screen background image

A typical use of VH units is to create a background picture that spans the entire screen height and width, regardless of the size of the device. This is easily achieved with VH:

. bg {     position:relative;     Background:url (' bg.jpg ') center/cover;     width:100%;     HEIGHT:100VH;   }

Full-screen content blocks like "multi-page"

Similarly, we can achieve a "multi-page" effect by making each content block of a page span the entire height and width of the viewport.

section {     width:100%;     HEIGHT:100VH;   }

We can use JavaScript to realize the illusion of flipping a page.

$ (' Nav '). On (' click ', function () {if (') ' (') '     hasclass (') ') {       var Movepos = $ (window). scrolltop () + $ (windo W). Height ();     }     if ($ (this). Hasclass (' up ')) {       var Movepos = $ (window). scrolltop ()-$ (window). Height ();     }     $ (' HTML, Body '). Animate ({       Scrolltop:movepos     }, +);   })

Pictures within the area

The VH units can also be used to control the size of the picture within the page. For example, in an article, we might want any image to be fully viewed on the page, but the size of the screen.

To do this, we can solve this problem:

The img {         width:auto;/* Picture width adjusts proportionally to the height of */      max-width:100%;/* The picture does not exceed the width of the parent element */      MAX-HEIGHT:90VH;/* Picture does not exceed the height of the viewport */      Margin:2rem auto;        }

Browser support Scenarios

Because these units are relatively new, there are still some problems with using some browsers. Here's how to solve these problems--

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!