Home > Developer > Web Develop
If you are a front-end development engineer, the average PX and EM usage frequency is higher. But today the focus of this article is to introduce some of the units we use very little or even heard of.
First, relive EM| 123456789101112131415 | |
Because Font-size is inherited, the darker the number of layers, the larger the font.
Second, REMAlthough the use of EM above may be used in development, but we sometimes want to have a benchmark to expand. When this requirement is met, we can use REM units, where "R" in rem stands for "root", which means that the font size of the current element is set to the root element, and in most cases we will set it on the HTML element.
| 123456789101112131415 | |
Of course, REM units are not only applied to fonts, but can also be implemented into CSS grid systems.
Iii. VH and VWIn a responsive layout, we often use percentages to lay out, but the percentage of CSS does not always solve the best scenario for each problem, and the width of the CSS is relative to the width of the parent element closest to it. If you want to use the width and height of the viewport instead of the width of the parent element, you can use VH and VW units. 1VH = Viewportheight * 1/100; 1VW = Viewportwidth * 1/100; With VH, VW can guarantee the width and height of the elements to accommodate different devices.
Iv. Vmin and VmaxVW and VH correspond to the width and height of the viewport, while the vmin and Vmax correspond to the minimum and maximum values in width, height, for example, if the width/height of the browser is set to 1000px/600px, then
1vmin = 600 * 1/100;
1vmax = 1000 * 1/100;
Let's take a look at a few examples: 4.1 a square element always touches at least two edges of a screen| 1234567891011 | |
| 123456789101112131415 | |
EX, CH units and EM, REM are similar in that all rely on font-size, but ex, CH also rely on font-family, based on font-specific to calculate. Citation specification:
ex unit equal to the used x-height of the First available font. [css3-fonts] the x-height is so called because it's often equal to the height of the Lowe Rcase "X". However, an 'ex' was defined even for fonts that does not contain an "x". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If Reliable font metrics is not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is-to-look at how far the glyph for the lowercase ' o ' extends below the baseline, and subtract that Value from the top of its bounding box. In the cases where it's impossible or impractical to determine the x-height, a value of 0.5em must be assumed.
CH Unit Equal to the used advance measure of the "0" (ZERO, u+0030) glyph found in the font used to render it .
Use a diagram to explain the meaning of these two units:
These two units, for many purposes, are mostly used for micro-adjustment during printing. For example, the SUP and sub elements display superscript and subscript respectively, but we can use position and bottom simulations:
| 123456789101112131415161718 | |
7 CSS units you may not know
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
