unitIt's the thing that describes the length. For example, height is 180cm (cm), cm is the unit.
css is no exception. To describe the size of a box, you must use units.
CSS units are divided into several categories according to their functions:Absolute unit、Relative Unit、Viewport unit、Angle Unit、Time unit、Grid Units、Frequency unit、Resolution unit。
Dynamic calculation unit
Before getting to know the unit, first understand a few dynamic calculation functions. The usage of this thing is so powerful, and I will introduce it later.
-
calc()
Dynamically calculated values (e.g.width: calc(100% - 20px)） -
min()
Take the minimum value (such aswidth: min(100%, 500px)） -
max()
Take the maximum value (such aswidth: max(50%, 300px)） -
clamp()
Limited to the scope (e.g.font-size: clamp(1rem, 2.5vw, 2rem)）
Absolute unit
The size of the absolute unit is fixed and independent of the screen or device, and is suitable for precise control. For example, a box with a length and width of 20 pixels, whether on a computer or a mobile phone, its size is 20px.
Pay attention to system scaling. If the laptop with a resolution of 2560x1440 is scaled by 100%, its width will still be 2560 pixels; if the laptop with a resolution of 150%, its width will become 2560÷1.5=1706.66.。
The sizes seen by the naked eye are different when scaling 100% and zooming 150% for the same 20 pixels.
-
px(pixels)
The most commonly used unit, 1px = 1 screen pixel (non-physical pixel), suitable for fixed-size elements (borders, icons) -
cm(centimeter)
Actual physical size (1cm ≈ 37.8px), mostly used for printing styles -
mm(mm)
Same centimeter, but more fine (1cm = 10mm) -
in(inch)
1in = 2.54cm ≈ 96px -
pt(point)
Printing unit, 1pt = 1/72 inch ≈ 1.33px -
pc(Pay Card)
Printing unit, 1pc = 12pt ≈ 16px
cm 、 mm 、 in 、 pt 、 pcThese units are mainly used for printing and other occasions where precise size is required.
Relative Unit
The size of the relative unit is based on other reference values (parent element, viewport, font size, etc.), which is suitable for responsive design.
In contrast, the unit must find a sixth brother, and the size of the sixth brother is his standard.
-
em
Relative to the font size of the current element, 1em is equal to the font size of the current element. If the parent element has a font-size attribute, the em value of the child element is calculated based on the font size of the parent element. Suitable for creating layouts that can scale relative to the user-set font size. -
rem
Relative to the font size of the root element (html element), 1rem is equal to the font size of the root element. Using rem units can facilitate responsive layout, while avoiding complex computing problems caused by nesting em units. -
%
Relative to the parent element's size, for example width: 50% means that the element width is 50% of the parent element's width. -
ch
Relative to the font width of the current element, 1ch = the width of the "0" character in the current font, suitable for text typography alignment. -
ex
Compared with the x height of the current font, 1ex is equal to the x height of the current font, and is less used.
Viewport unit
The viewport unit is the width or height of the browser window. It has nothing to do with the screen or device, but only with the browser's viewable window.
-
vw
1% of viewport width (50vw = half of viewport width). -
vh
1% of viewport height. -
vmin
Take 1% of the viewport width of high school (such as vw in vertical screen mobile phones). -
vmax
Take 1% of the larger viewport width of high school. -
svh/lvh
Distinguish short viewports (svh) and full viewport (lvh) to solve the problem of occluding address bar of mobile browsers.
Angle Unit
The opposite is the angle and radian in the trigonometric function.
-
deg(degree)
Indicates an angle, used to control rotation and deformation. -
rad(radian)
Indicates radians, used to control rotation and deformation. -
grad(gradient)
Represents a gradient, used to control rotation and deformation. -
turn(Number of laps)
Indicates the number of rotations, used to control rotation and deformation.
Time unit
It is mostly used to control duration, such as animation.
-
s(Second)
Used to control the length of time of animation and transitions. -
ms(millisecond)
The length of time used to control animations and transitions is one thousandth of a second.
Grid Units
For grid layout, it is Grid.
-
fr
Represents a portion of the remaining space of the grid container for grid layout.
Frequency unit
Hey...this is really uncommon.
-
Hz(hertz)
Indicates the frequency, used to control the playback speed of animation and audio. -
kHz(kilohertz)
It represents kilohertz, which is a thousand times that of hertz, and is used to control the playback speed of audio.
Resolution unit
Used for printing media query, never seen before~~
-
dpi(Points per inch)
Indicates the number of dots per inch, which controls image size and clarity. -
dpcm(Points per centimeter)
Represents the number of points per centimeter, used to control the size and clarity of the picture. -
dppx(Points per pixel)
Represents the number of points per pixel, used to control image size and sharpness.
Common units
Not every unit can be used, but only a few commonly used units are generally used, as follows:
-
px
Borders, fixed size icons, tiny spacing. -
%
Container width, height (relative to parent element). -
rem
Font size, spacing, layout size. -
vw/vh
Full screen layout, responsive fonts/elements. -
fr
Elastic column width in CSS Grid layout. -
calc()
Dynamically calculate sizes (such as calc(100% - 20px). -
clamp()
Fluid responsive design (such as font, container size).
Summarize
-
Core Mastery:
px、%、rem、vw/vh、fr、calc()、min()、max()、clamp()。 -
Just understand:
em、vmin/vmax、ch。 -
Special scene backup:
svh/lvh、ex。 -
No need to go into it:
cm、mm、in、pt、pc。