“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Recently, my brother-in-law found a front-end internship, but he learned mobile communication, although the company is known as zero basis, with the old man, but never touched the front-end development of him, a face confused, these days he learned the label, just began to write layout, asked me how to define the length of a box? With that I have briefly summarized the following

Unit of the length of the Web front-end

The units of length can be divided into two categories: absolute and relative

The length of the absolute

An absolute unit of length is a fixed value that reflects a real physical dimension. The absolute length unit depends on the output medium and is not environment dependent (display, resolution, operating system, etc.). For example cm, mm, in (inch, 1in = 96px = 2.54cm), PT (1/72 inch), PC (1/6 inch, 1PC = 12pt)

Relative length

There is a baseline for relative lengths

Em, for example, describes the font size relative to that applied to the current element

Px pixel

Px Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor.

Px is the smallest point on the device or image. For example, my browser has 1792 pixels by 1087 pixels, which means 1792 pixels horizontally and 1087 pixels vertically.

Px is a common and basic unit for web design. It allows you to set a fixed layout or element size. Note that the smallest unit of PX is 1, so the decimal measure is meaningless.

rem

Rem is relative to the root HTML, which means that we only need to specify a reference value for the root element. We can design the HTML to be 10px, and then set 1.2rem to 12px. And so on

The advantage is that you can scale the entire page just by setting the size of the root directory. The ones used to fit different screens will eventually be converted to PX for layout so there is no limit to accuracy

%

Percentage

vw/vh

Vw and VH are new cSS3 units

Vw is short for View Width, which is the width of the visible window. It’s also a percentage, if the width is 1920px. So 100vw is 1920px, and 10vm is 192px

Vh is short for View height. It refers to the height of the visible window, and is also a percentage, if the height is 720px. So 100vw is 720px, and 10vm is 72px

vmin/vmax

Vim uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin is equivalent to 1vh; If the width of the browser is smaller than its height, 1vmin is equivalent to 1vw.

Vmax is the opposite: it uses the largest side. So when the viewport is wider than the height, 1vmax is equivalent to 1vw; If the browser is taller than wide, 1max is equivalent to 1vh.

calc()

The calc() function is used to dynamically calculate the length value.

Leave a space before and after the operator, for example: width: calc(100%-10px);

The calc() function supports “+”, “-“, “*”, “/”;