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

This article will explain in detail what CSS units are. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

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 the page width to 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.

Web front-end development learning Q-q-u-n: 767273102, sharing learning methods and small details that need attention, constantly updating the latest tutorials and learning methods (detailed front-end project actual teaching video) III, vmin, vmax usefulness

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.

About "CSS unit is what" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.