Detailed CSS in the Windows Unit and percentage of the use of units

Windows (Viewport) unit

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 associated with Windows (Viewport).

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

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

% units are more appropriate when handling widths. When handling height, the VH unit is better.

Elements of full width:% > VW

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

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 HTML and body elements. In this example, I wrap the HTML element in a red border and then set the background color for the section element.

Because of this subtle difference, it is best to use a percentage unit instead of the width of the viewport when making an element span the width of the entire page.

Elements of full height: vh >%

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

Because the size of the element defined as a percentage is determined by its parent element, only the parent element fills the height of the entire screen before 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 programs.

However, with VH, it is as simple as the following:

CSS code copy content to clipboard

. example {

HEIGHT:100VH;

}

Regardless of how the. Example element is nested, it can also be sized relative to the size of the window. The problem with ScrollBars is also not a problem because most pages do not usually have a horizontal scroll bar at the moment.

Here are some examples of how we can use VH units to easily create some designs.

Background picture with full screen

VH unit A typical use is to create a background picture spanning the entire screen height and width, regardless of the size of the device. This is easy to implement with VH:

CSS code copy content to clipboard

. BG {

position:relative;

Background:url (' bg.jpg ') center/cover;

width:100%;

HEIGHT:100VH;

}

Full-screen content blocks like "multiple pages"

Similarly, we can achieve a "multiple page" effect by making each piece of content across the page span the entire height and width of the viewport.

CSS code copy content to clipboard

Section {

width:100%;

HEIGHT:100VH;

}

We can use JavaScript to realize the illusion of flipping pages.

CSS code copy content to clipboard

$ (' 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);

})

Pictures in the area

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

To do this, we can solve this problem:

CSS code copy content to clipboard

IMG {

Width:auto; /* The width of the picture is proportionally adjusted according to the height * *

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

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