Viewport units are relative units based on browser viewport size in CSS, used to create responsive layouts. 1. vw and vh represent 1% of the viewport width and height respectively. For example, 10vw is 10% of the width and 20vh is 20% of the height, which is suitable for full-screen display or fixed proportional elements; 2. vmin and vmax are calculated based on the smaller or larger edges of the viewport. For example, vmin equals vh and vmax equals vw in landscape screen, which is suitable for adapting to different screen directions; 3. Usage techniques include setting responsive fonts with vw (with media query limit range) and 100vh to implement full-screen blocks, but it is necessary to note that the mobile address bar affects the visual area, which can be solved by 100dvh or JavaScript.

Viewport units are relative units in CSS, and their values ??are calculated relative to the size of the browser viewport. Common viewport units are vw , vh , vmin and vmax , which can be used to create responsive layouts to automatically adjust the size of the element according to the screen size.

1. vw and vh : based on viewport width and height

• vw represents 1% of the viewport width. For example, 10vw is 10% of the viewport width.
• vh means 1% of the viewport height. For example, 20vh is 20% of the viewport height.

For example: If you set a <div> to <code>50vh , it will occupy half of the screen height on any device.

This is very useful when doing full screen displays or when you want an element to always fill up a part of the screen. For example, the welcome page, guide layer, etc. on the mobile terminal.

2. vmin and vmax : Calculate based on edges with smaller or larger viewports

• vmin is 1% of the smaller viewport width and height.
• vmax is 1% of the larger viewport width and height.

for example:

• In a horizontal screen device, if the width is greater than the height, then vmin is equal to vh and vmax is equal to vw ;
• In a vertical screen device, if the height is larger, then vmin is equal to vw and vmax is equal to vh .

These two units are suitable for use in scenarios where different screen directions need to be adapted to, such as keeping the text size undeformed when rotating the screen.

3. Common tips and precautions for using viewport units

• Use vw to achieve responsive text , but be careful to scale the range to avoid being too small or too large. You can use media query to match the limit range.
• Full-screen scrolling pages often use 100vh to set the height of each block , so that each block just fills one screen.
• Pay attention to the impact of the browser address bar : On the mobile side, 100vh is sometimes "compressed" by the browser address bar, resulting in the actual display area being smaller than expected. At this time, you can use JavaScript to dynamically obtain the height, or use 100dvh (dynamic viewport height) instead.

Basically that's it. Although viewport units are simple, they are very practical when building modern responsive web pages. Just pay attention to some boundaries and can improve the user experience well.