Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of CSS units, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

Units of length such as px, rem, em, and % must be familiar to everyone. The former are absolute units and the latter are relative units. CSS3 introduces new units: vw, vh, vmin, vmax. A detailed description of them follows.

unit action property px page displays absolute unit rem in pixels relative to root html font size to calculate relative unit em base point is relative to parent node font size relative unit % relative to parent element size set ratio relative unit vw window width percentage, 1vw represents window width 1% window unit vh window height percentage, 1vh represents 1% of the window height. The window unit vmin is the smaller of the current vw and vh. The window unit vmax is the larger of the current vw and vh.

Tip: vw, vh, vmin, vmax are window units and relative units. It is not relative to the parent node or the root node of the page. It is determined by the size of the viewport, with units of 1 representing something like 1%.

Viewport is the area of your browser that actually displays content--in other words, your web browser that doesn't include toolbars and buttons.

If you set a page width of 800px, then 400px=50vh=50%.

Difference between px, em and rem

px is a fixed pixel, once set it cannot be changed to fit the page size.

Em and rem are more flexible than px because they are relative units of length, meaning length is not fixed and is more suitable for responsive layouts.

The difference between em and rem can be summarized in one sentence: em is relative to the parent element, rem is relative to the root element.

The r in rem means root, which is understandable.

Difference between VW, VH and %

% is the ratio set relative to the size of the parent element, vw, vh are window size dependent.

The advantage of vw and vh is that they can directly obtain the height, while % cannot correctly obtain the height of the visible area without setting the body height, so this is a good advantage.

Vmin and Vmax are useful.

When doing mobile page development, if you use vw or wh to set the font size (such as 5vw), the font size displayed in portrait and landscape is different.

Since vmin and vmax are currently smaller vw and vh and currently larger vw and vh. Here you can use vmin and vmax. Make text size consistent across horizontal and vertical screens.

Thank you for reading this article carefully. I hope that the article "Sample Analysis of CSS Units" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.