How the new unit of CSS3 VW, VH, vmin, Vmax should be used

This time to bring you CSS3 new unit VW, VH, vmin, Vmax should be how to use, CSS3 new unit VW, VH, vmin, Vmax use of attention to what matters, the following is the actual case, together to see.

This article introduces the CSS3 new unit VW, VH, Vmin, Vmax of the use of detailed, share to everyone, specifically as follows:

Meaning of 1,VW, VH, Vmin, Vmax

(1) VW, VH, Vmin, Vmax is a kind of window unit, is also a relative unit. It is relative to either the parent node or the root node of the page. Instead, it is determined by the size of the window (Viewport), Unit 1, which represents similar to 1%.
Windows (Viewport) is the area where your browser actually displays content-in other words, your web browser that does not include toolbars and buttons.

(2) The specific description is as follows:

VW: Percent of window width (1vw for window width 1%)
VH: Percentage of window height
Vmin: A smaller value in the current VW and VH
Vmax: A larger value in the current VW and VH

Difference between 2,VW, VH and percent of%

(1)% is relative to the size of the parent element set ratio, VW, VH is the size of the window is determined.
(2) The advantage of VW, VH is to be able to directly obtain the height, and% in the case without setting the body height, is not able to correctly obtain the height of the visible area, so this is quite good advantage.

3,vmin, Vmax use

When developing a mobile page, if you use VW, WH to set the font size (such as 5VW), the font size displayed in the vertical screen and the horizontal screen state is different.

Since Vmin and Vmax are currently smaller VW and VH and the current larger VW and VH. Vmin and Vmax can be used here. Make the text size consistent across the screen.

4, browser compatibility

(1) Desktop PC

Chrome: Perfect support since the 26 release (February 2013)
Firefox: Perfect Support since the 19 release (January 2013)
Safari: Perfect Support since version 6.1 (October 2013)
Opera: Perfect Support since the 15 release (July 2013)
IE: From IE10 onwards (including Edge) to now only partially supported (Vmax not supported, VM instead of Vmin)

(2) Mobile devices

Android: Perfect Support since version 4.4 (December 2013)
IOS: Perfect support since the IOS8 version (September 2014)

Second simple examples

1, page code

Windows (Viewport) units can be used in addition to setting the width and height of the elements. Below, use VW to set the font size to implement responsive text.

<! DOCTYPE html>
Third, to achieve a complete coverage of the mask layer

Sometimes to highlight a popup, or to prevent the page element from being clicked. We need a translucent matte covering the entire viewable area, which can be easily implemented with VW and VH.

1, sample code

<! DOCTYPE html>
Four, to achieve the center display of the pop-up box

1, pop-up box size with content adaptive

(1) Examples

When you click the Eject button, a pop-up box appears centered across the screen.

The size of the pop-up box adapts to the size of the content (logo image), and a translucent matte layer that covers the entire screen after the popup box.

When you click the Close button, the pop-up box is hidden.

(2) Sample code

Masking layers use VW, VH for full-screen coverage. The pop-up box is added to the mask layer and centered.

<! DOCTYPE html>
2, pop-up box size changes with window size

(1) Examples

When you click the Eject button, a pop-up box appears centered across the screen.

The size of the popup box is no longer determined by the size of the content, but varies with the size of the window (width height is 80% of the viewable area of the screen).

When you click the Close button, the pop-up box is hidden.

(2) Sample code

Masking layers use VW, VH for full-screen coverage. The size of the pop-up box also uses the VW and VH settings.

<! DOCTYPE html>
Limit the maximum size when displaying large images.

We can also limit the maximum width or height of some elements through view units, avoiding oversized dimensions and exceeding the screen.

(1) Click the button to display a large image of the original image in the center of the screen.
(2) If the original width height of the picture does not exceed 90% of the screen width, the default size of the picture is displayed.
(3) If the original width of the picture is more than 90% of the width of the screen, it is limited to 90% of the screen so that it can be fully displayed.

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

HTML5 how to make a picture in circles animation effect

How to make JSON and echarts diagrams in the same interface with H5 WebGL

How H5 's semantic tag new features should be used