Home > Developer > Web Develop
It is well known that CSS technology is very familiar to us, and it is easy to get stuck in the process of using it, which makes us disadvantageous when new problems arise.
As the web continues to evolve, the demands for new technologies and solutions will continue to grow. Therefore, as a web designer and front-end developers, we have no choice, we must be familiar with the tools we have in hand, so that we can baizhanbudai.
This means that there are a few special goods, although it is not usually used, but once they are needed in a certain place, they are really the right one.
Today, I'm going to introduce you to some of the CSS guys that you might have seen so little before. Each of them is a unit of measure, similar pixel and em this, but it's possible that you've never heard of these guys before! Let's make a friend.
We first introduce the very similar goods that we are familiar with. emis defined as the font size relative to the text within the current object. Fry a chestnut, if you give the body small brother set the Font-size font size, then the body small brother of any child element 1em is equal to the body set of font-size.
| 123 | <BODY> <div class = |
| 123456 | body { font-size: 14px;}div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px} |
You see, the font size of this div here is 1.2em. The explanation is that he inherits the font size (here is 14px) from the body Dad 1.2 times times, the result is 16.8px.
But what happens if you use EM to define the font size of nested elements in a layer of one level? In this little piece of code, we apply the same CSS as above, each of which inherits the font size from its parent, and increases gradually.
| 1234567891011 | |
Instance
Although this is what we want in some places, it is usually desirable to rely on a single relative unit of measure. And then we can use it rem . ' R ' is the "root" abbreviation, meaning that 1rem is equal to the font size of the root element; In most cases, the root element is the element.
123456
html { font-size: 14px;}div { font-size: 1.2rem;}
So in the above three nested div doll font size is 1.2*14px = 16.8px.
Applies to Grid layoutRems is not just easy to set the font size. To fry a chestnut, you can use REM based on the font size of the HTML root element as the entire grid layout or the size unit of the UI library, and then use EM units in other specific places. This will give you more control over the font size and scaling,
123
.container { width: 70rem; // 70 * 14px = 980px}
Conceptually, the idea of this approach is to have your interface scale based on your content. However, this does not make sense for all situations.
VH and VWResponsive web design is inseparable from the percentage. However, CSS percentages are not the best solution for all problems. The width of the CSS is relative to the width of the nearest parent element that contains it. But what if you want to use the width or height of the viewport (viewpoint) instead of the parent element? And that's what vh vw the unit has to offer us.
1 vh is equal to 1/100 of the viewport height. Chestnuts: Browser height 900px, 1 vh = 900px/100 = 9 px. Similarly, if the viewport width is not 1 vw = 750px/100 = 7.5 px.
As you can imagine, they have a lot of uses. For example, we use a very simple method of using only one line of CSS code to achieve the same screen and other high boxes.
123
.slide { height: 100vh;}
Suppose you want to have a screen with the width of the title, you just set the title of the Font-size Unit for vm , the title of the font size will automatically be based on the width of the browser to zoom to achieve the font and viewport size synchronization effect, there is wood?!
Instance
Vmin and VmaxvhAnd the vm vmin vmax minimum or maximum value of both the height and width of the viewport, relative, and the height and width of the viewport. For example, the width of the browser is set to 1100px, the height is set to 700px, 1vmin = 1px, 1vmax = 11px. If the width is set to 800px and the height is set to 1080px, 1vmin it is equal to 8px, 1vmax not 10.8px.
So the question is, in what scenario should we use these two units?
Suppose there is an element that you need to make it always visible on the screen. Just use vmin units for their height and width, and give them a value below 100 to do it. Another chestnut, you can define a square that has at least two edges touching the screen:
1234
.box { height: 100vmin; width: 100vmin;}
If you want this square box to always fill the visible area of the entire viewport (four sides always touch the edges of the screen)
1234
.box { height: 100vmax; width: 100vmax;}
The combination of these units can provide us with a novel and interesting way to use the size of our viewport flexibly.
exchexand ch units, similar to em and rem , depend on the current font and font size. However, the difference is that the two goods are based on the font's unit of measure, depending on the font being set.
chUnits are usually defined as the width of the number 0. You can find some interesting discussions about it in Eric Meyers's blog, such as setting the width of the letter "N" of a single, equal-width font 40ch , which can contain 40 letters in another type of font. The traditional use of this unit is mainly in Braille, but beyond that, there must be a place where he can be used.
exThe height of the lowercase letter defined as the current font, x or 1/2 1em . Many times, it is the middle mark of the font.
x-height; The height of the lower case X
These units have many uses and are mostly used for fine-tuning of typography. For example, an sup element (the upper-corner text label) can be position:relative;bottom: 1ex; implemented by. In a similar way, you can implement a text marker in the lower corner. The default way for browsers is to use
Superscript and subscript specific vertical alignment rules, but if you want finer granularity more precise control, you can do it like this:
12345678
sup { position: relative; bottom: 1ex;}sub { position: relative; bottom: -1ex;}
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
