Home > Developer > Web Develop
We are easily unable to get rid of the use of our familiar CSS technology, when new problems arise, this will put us in a disadvantageous position.
As the web continues to evolve, the need for new solutions will continue to grow. So, as Web designers and front-end developers, we have no choice but to get to know our toolset and be familiar with it.
This means that we also need to understand some special tools-those that are not used very often, but when they are needed, they are the right tools.
Today, I'm going to introduce you to some CSS tools you might not have known before. These tools are units of measure, like pixels or relative units, but chances are you've never heard of them! Let's explore.
RemWe'll start with what you're already familiar with. emthe unit is defined as the current font size. For example, if you body set a font size on an element, the body value of any child element within the element is em equal to the 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 one 1.2em font-size . It is the size of the inherited font 1.2 as many times as in this example 14px . The result is 16.8px .
But what happens when you cascade the em defined font size within each element? In the code snippet below we apply the same CSS as above. Each div inherits the font size from their parent node, giving us a gradual increase in the 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>
< Body >
<class= "Test">Test</div>
</ Body >
div {font-size:1.2em;//calculated at 14PX * 1.2, or 16.8px}
While this may be required in some cases, you may want to scale proportionally based on a single metric. In this case, you should use rem . rem r This is equivalent to root font-size setting based on the root element, and in most cases the root element is the html element.
html {font-size: 14px; }div {font-size 1.2rem; /span>
In the previous example, the three nested div font sizes were computed as a result 16.8px .
remis not only useful for defining font size. For example, you can use the rem entire grid system or UI style library based on the font size of the HTML root element, and then use scale scaling in a specific place em . This will give you a more predictable font size and scale.
.container { 70rem; // 70 * 14px = 980px}
Conceptually, the idea behind a strategy like this is to allow your interface to scale as you zoom in on your content. However, this may not necessarily be meaningful for each case.
The "REM (Root EM) unit" Compatibility List.
VH and VWResponsive web design technology 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 instead of the width of the parent element? This is exactly what the vh vw unit has to offer.
vhEqual to viewport height 1/100 . For example, if the browser is high 900px , the 1vh value evaluated is 9px . Similarly, if the display window width is 750px , the 1vw value to be evaluated is 7.5px .
These rules appear 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 that you want a title that fills the screen width. To do this, you will use vw to set a font size. This size will be scaled proportionally to the width of the browser.
<h2>settle down? Is you kidding? <br>i ' m at the top of my game! </H2>
<p><em>-elastigirl</em></P>
body {
background: #ff5722;
padding: 1em 0;
color: #64ffda;
}
h2 {
font-size: 6vw;
margin-bottom: .2em
}
Windows unit: vw , vh "The Compatibility List.
vhAnd vm is always related to the height and width of the viewport, unlike, vmin and vmax is related to the maximum or minimum value of this width and height, depending on which is larger and smaller. For example, if the browser 1100px is set to wide and 700px high, it 1vmin will be 7px , 1vmax for 11px . However, if the width is set to and the height is set to, it will be equal to and will be 800px 1080px 1vmin 8px 1vmax 10.8px .
So when can you use these values?
Imagine that you need an element that is always visible on the screen. 100 vmin This effect can be achieved by using a value that is set below the height and width. For example, a square element always touches at least two edges of the screen that might be defined like this:
.box { height: 100vmin; width: 100vmin;}
If you need a square that always covers the visible window (all the way to the four sides of the screen), use the same rules to replace the unit vmax .
.box { height: 100vmax; width: 100vmax;}
The combination of these rules provides a very flexible way to take advantage of the size of your viewable window in new and exciting ways.
Viewport units:vmin, Vmax "Compatibility List.
EX and CHexand ch units, and em rem similar, depend on the current font and font size. However, unlike em and rem unlike, these two units are also dependent font-family , as they are designated as special font-based bills.
chThe unit, or character unit, is defined as the 0 "advanced size" of the width of the character. In "Eric Meyer's Blog" You can find some very interesting discussions about what this means, but the basic concept is that given a font of equal width, a box with a width of n characters, for example width：40ch; , can always accommodate a 40 Character to apply the string of that particular font. Although the traditional use of this particular rule is related to the listing of Braille, the creative viability of this is certainly beyond these simple uses.
exThe unit is defined as "half of the current font x-height or one em ". The given font refers to the x-height lowercase height of that font x . Usually, this is the middle sign of the font.
X-height: The height of the lowercase letter x (read more about the anatomy of the Web typography)
There are many uses for this unit, most of which are for typography. For example, sup an element , which represents superscript, can be pushed higher within a row with relative positioning and a 1ex bottom value. Similarly, you can pull down a subscript element. The browser supports these rules using superscript and subscript features by default vertical-align , but if you want finer control, you can handle the style more explicitly like this:
Sup{Position:Relative bottom: Span class= "number" >1ex; }sub {position Relative; bottom : -1ex; /span> exThe unit already exists in CSS1, but you will not find ch a solid support like this for the unit. Specifically, view CSS units and values in Eric Meyer's blog.
It is important to keep a close eye on the continuous development and expansion of CSS and to know all the tools in your toolset. Perhaps you will encounter a special problem that requires an unexpected solution, using one of these more discreet units of measurement. Take the time to read the new specs and record the news from good resources!
Original: Https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html? W3cplus.com
Seven CSS units that you may not understand
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
