If you are a front-end development engineer, General PX and EM use frequency is relatively high. But today the focus of this article is to introduce some of the units we use very little or even have heard.
One, relive em
<style type= "Text/css" >
body {font-size:12px;}
div {font-size:1.5em;}
</style>
<body>
<div>
TEST-01 (12px * 1.5 = 18px)
<div>
TEST-02 (18px * 1.5 = 27PX)
<div>
TEST-03 (27PX * 1.5 = 41px)
</div>
</div>
</div>
</body>
Because Font-size is inherited, the darker the number of layers is, the larger the font.
Second, REM
Although the above use of EM may be used in development, we sometimes want to have a benchmark to expand. When confronted with this requirement, we can use the REM unit, "R" in rem to represent "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.
<style type= "Text/css" >
HTML {font-size:12px;}
div {font-size:1.5rem;}
</style>
<body>
<div>
TEST-01 (12px * 1.5 = 18px)
<div>
TEST-02 (12px * 1.5 = 18px)
<div>
TEST-03 (12px * 1.5 = 18px)
</div>
</div>
</div>
</body>
Of course, REM units are not only used in fonts, but also in CSS grid systems.
Iii. VH and VW
In a responsive layout, we often use percentages to lay out, but the percentage of CSS does not always solve the best solution 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 rather than the width of the parent element, you can use the VH and VW units. 1VH = Viewportheight * 1/100; 1VW = Viewportwidth * 1/100; The use of VH, VW can ensure that the elements of the width and height to adapt to different devices.
Iv. Vmin and Vmax
VW and VH correspond to the width and height of viewport, while 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,
1vmin = 600 * 1/100;
1vmax = 1000 * 1/100;
Let's take a look at a few examples:
4.1 A square element always touches the edges of at least two screens
<style type= "Text/css" >
. box {
Height:100vmin;
Width:100vmin;
}
</style>
<body>
<div class= "box" style= "Background-color: #f00" >
Fdasjfdlas
</div>
</body>
4.2 Overlay Full Screen
<style type= "Text/css" >
Body {
margin:0;
padding:0;
}
. box {
/* Widescreen display width > height*/
Height:100vmin;
Width:100vmax;
}
</style>
<div class= "box" style= "Background-color: #f00" >
Fdasjfdlas
</div>
V, ex and CH
EX, CH units are similar to EM and rem in that they all depend on font-size, but ex and CH are also dependent on font-family, based on font-specific. Reference to the Consortium specification:
Ex unit Equal to the used x-height of the The ' the ' the ' The '" [Css3-fonts] The x-height is and so called because it are often equal to the height of the lowercase "x". However, an ' ex ' are defined even for fonts that does not contain an "x". The x-height of a font can is found in different ways. Some fonts contain reliable metrics for the x-height. If Reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look in 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 are assumed.
ch Equal to the Used advance measure of the ' 0 ' (ZERO, u+0030) glyph found in the font used to Rende R it.
Use a diagram to explain the meaning of these two units:
These two units have many uses, most of which are micro-adjustments for printing. For example, the SUP and sub elements display superscript and subscript respectively, but we can use position and bottom simulations:
<style type= "Text/css" >
Body {
margin:0;
padding:0;
}
. sup {
position:relative;
Bottom:1ex;
}
. Sub {
position:relative;
Bottom: -1ex;
}
</style>
<div>
Aab<span class= "sup" >b</span>ccxxd<span class= "sub" >d</span>eeff
</div>
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
