Today, I'm going to introduce you to some CSS tools you might not have known before. These tools are units of measurement, like pixels or relative units, but you probably never heard of them! Let's have a go at it.
REM
We'll start with something you already know. The EM unit is defined as the current font size. For example, if you set a font size on the BODY element, the EM value of any child element within the BODY element is equal to this font size.
<body>
<div class= "Test" >Test</div>
</body>
Body {
font-size:14px;
}
div {
Font-size:1.2em; Calculated at 14PX * 1.2, or 16.8px
}
Here, we say this div will have a 1.2em font-size. It is 1.2 times times the size of the inherited font, in this case 14px. The result is 16.8px.
But what happens when you cascade the EM-defined font size within each element? In the following code snippet we apply the same CSS as the above. Each div inherits the font size from their parent node, bringing us increasing font size.
<body>
<div>
Test <!--* 1.2 = 16.8px-->
<div>
Test <!--16.8 * 1.2 = 20.16px-->
<div>
Test <!--20.16 * 1.2 = 24.192px-->
</div>
</div>
</div>
</body>
Although this may be necessary in some cases, you may want to scale it proportionally based on a unique metric. In this case, you should use REM. The "R" in rem represents "root", which is equivalent to font-size based on the root element, and in most cases the root element is an HTML element.
HTML {
font-size:14px;
}
div {
Font-size:1.2rem;
}
The font size of the three nested div in the previous example is calculated to be 16.8px.
Benefits for Grid layout
REM is not only useful for defining font sizes. For example, you can use REM to base the entire grid system or UI style library on the font size of the HTML root element, and then use EM scaling in a particular place. This will bring you a more predictable font size and scaling.
. container {
Width:70rem; * 14px = 980px
}
Conceptually, the idea behind a strategy like this is to allow your interface to scale proportionally with your content. However, this may not necessarily be meaningful for each case.
The Compatibility List for REM (Root em) units.
VH and VW
The technology of responsive web design relies heavily on proportional rules. However, the CSS scale is not always the best solution for each problem. The CSS width is relative to the nearest containing parent element. What if you want to use the width or height of the display window rather than the width of the parent element? This is exactly what the VH and VW units offer.
VH equals the viewport height of 1/100. For example, if the height of the browser is 900PX,1VH the value is 9px. Similarly, if the display window width is 750PX,1VW evaluates to 7.5px.
These rules seem to have endless uses on the surface. For example, making a full height or nearly full height slide can be done in a very simple way, with just one line of CSS:
. Slide {
HEIGHT:100VH;
}
Imagine you want a title that fills the width of the screen. To do this, you will use VW to set a font size. This size will be scaled proportionally to the width of the browser.
Windows unit: VW, VH "Compatibility List.
Vmin and Vmax
VH and VMS are always associated with the height and width of the viewport, unlike Vmin and Vmax, which are related to the maximum or minimum value of this width and height, depending on which is larger and smaller. For example, if the browser is set to 1100px wide and 700px high, 1vmin will be 7px,1vmax 11px. However, if the width is set to 800px, the height set to 1080px,1vmin will be equal to 8px and 1vmax will be 10.8px.
So when are you likely to use these values?
Imagine you need an element that is always visible on the screen. This effect can be achieved by using a Vmin value that is set to a height and width below 100. For example, a square element that always touches at least two edges of the screen may be defined as this:
. box {
Height:100vmin;
Width:100vmin;
}
If you need a square that always covers the visual window (four edges that always touch the screen), use the same rule just to change the unit to Vmax.
. box {
Height:100vmax;
Width:100vmax;
}
The combination of these rules provides a very flexible way to use the size of your visual window in new and exciting ways.
Viewport units:vmin, Vmax "Compatibility List.
The
EX and CH
Ex and CH units, similar to EM and REM, depend on the current font and font size. However, unlike EM and REM, these two units are only dependent on font-family, as they are defined as bills based on special fonts. The
Ch Unit, or character unit, is defined as the "advanced size" of the width of 0 characters. In "Eric Meyer's Blog" You can find some very interesting discussions about what this means, but the basic concept is to give a font of equal-width fonts, a box of N-character units, such as width:40ch; You can always hold a string that has a 40-character application for that particular font. Although the traditional use of this particular rule is related to the listing of Braille, the creative possibilities here will certainly go beyond these simple uses. The
Ex unit is defined as "x-height of the current font or half of an em." The x-height of a given font refers to the height of the lowercase x of that font. Usually, this is the middle sign of this font.
ex
X-height: The height of the lowercase letter x (read more about the anatomy of Web typography)
There are many uses for this unit, most of which are for typographic fine-tuning. For example, the SUP element, which represents the superscript, can be pushed higher in the row with relative positioning and a 1ex bottom value. Similarly, you can pull down a subscript element. Browsers support these Vertical-align rules that take advantage of superscript and subscript attributes, but if you want finer control, you can handle styles like this more explicitly:
sup {
position: relative;
Bottom:1ex;
}
Sub {
position:relative;
bottom: -1ex;
}
Ex units already exist in CSS1, but you will not find a solid support for CH units like this. For specific support, view the CSS units and values in the Eric Meyer ' s blog.
Conclusion
It is important to keep a close eye on the continued development and expansion of CSS, knowing all the tools in your toolset. Perhaps you will encounter a special problem that requires an unexpected solution that utilizes one of these more subtle units of measurement. Take the time to read the new specs and record news from good sources!
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
