This is my third article about getting started.
What units are CSS going to have?
In our daily work, we often use units such as PX,REM,EM,%. In fact, there are many different units of CSS, and most of them we may not have heard of, or have not heard of the use of units.
There are two unit lengths of the CSS: absolute length and relative length:
The length of the absolute
Absolute length units are fixed, and lengths expressed in terms of any absolute length will be shown as exactly this size.
(1px = 1/96th of 1in) pt point (1pt = 1/72 of 1in) PC card (1PC = 12 pt)
It is not recommended to use absolute length units on screens because screen sizes vary widely. For example, if you use 20CM, whether it’s a big mobile phone, or a small mobile phone, or on the computer screen, the display size is all 20CM. This is obviously not compatible with terminal adaptation, which can make elements on a phone with a small screen look unusually incongruous.
However, if you know the output media, you can use them, for example for print layouts, and the unit PT is often used. In Word or Photoshop, pt is pretty handy. Because the main purpose of using Word and Photoshop is to print. Pt can be fixed as a unit of absolute length when printed to a solid object: for example, in a Word document, the article uses “宋体 9pt”, the title and so on “boldface 16pt”, then the computer does not set, but the document is printed, the text displayed is this big. Or in Photoshop, set the font size for an art effect in an image to 72pt, and that’s how big it will print out. So it’s pretty clear when to use this absolute unit.
Relative length
The relative length unit specifies the length relative to another length property. Relative length units scale better between different rendering media.
Em font size relative to the element (2em indicates twice the current font size) ex X-height relative to the current font (rarely used) CH width relative to “0” (zero) REM font size relative to the root element (font-size) vw 1% vh relative to the viewport width 1% vmin relative to the viewport’s height 1% vmax relative to the viewport’s larger size 1% % relative to the parent element
Screens come in a variety of sizes, and if you want your page to fit most screens, you need to choose the right units. These units of relative length can be used flexibly and interchangeably.
For example, when making the overall layout of the page, I often use %, so that different screen sizes, can adjust according to %. Element widths can be adapted to each other based on the width and height of the parent element to avoid layout errors. When you do the layout, you can also do some length calculations. For example: width: calc(100% vw-10px) Calc (100vH-20px) means the height is the viewport height minus 20px. This is handy because you don’t have to worry about how much width and height to use so that the page doesn’t have any extra space or doesn’t fill up the corresponding space.
In an interview, I was asked what was the difference between EM and REM. I didn’t really have any idea what these units were. I looked them up later and realized that REM is the font size relative to the root node and EM is the font size relative to the parent node. Using this unit, you can adapt the font size on the mobile end, and you can avoid the situation that the font on the big screen is too small, or the font on the small screen is too big.
The units vmin and vmax are interesting. For example, on a PC screen, vmin is 1% of the height and wmax is 1% of the width, but on a mobile screen, vmin is 1% of the width and wmax is 1% of the height. Isn’t that interesting?
Ex = ex = ex = ex = ex = ex = ex = ex = ex = ex = ex = ex
Once I saw a CSS effect, which imitated the effect of typing on the screen and typing out characters one by one. Then I saw the unit CH used in THE CSS, which was 13 letters per word, and gradually increased the width of the label from 1CH to 13CH. The special effects are very realistic. Just looked for this article, write very good! Come and have a look
The above is just a brief explanation of the basic use of some units, how to use these different units, practice can be true knowledge oh ~~