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, like pixel and EM, but chances are you've never heard of these guys before! Let's make a friend.
RemWe first introduce the very similar goods that we are familiar with. EM is 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.
<body> <div class= "test" >Test</div></body> 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.
<body> <div> Test <!--* 1.2 = 16.8px--<div> Test <!--16.8 * 1.2 = 20.16px and <di V> Test <!--20.16 * 1.2 = 24.192px--</div> </div> </div></body>
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 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
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,
. container {Width:70rem;//* 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? This is what VH and VW units provide for us.
1VH is equal to 1/100 viewport height. Chestnuts: Browser height 900px, 1 vh = 900PX/100 = 9 px. Similarly, if the viewport width is not 1vw = 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.
. 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 the VM, the title 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
VH and VMS are based on the height and width of the viewport, relative, Vmin and Vmax are the minimum or maximum values for both the viewport height and width. 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, the height is set to 1080px, 1vmin is equal to 8px, and 1vmax is 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:
. 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)
. 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.
EX and CHEx and 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.
The CH unit is 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 equal-width font to 40ch, then it 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.
The ex is defined as the lowercase x-letter height of the current font or 1/2 of 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, the SUP element (the upper-corner text mark) can be achieved by POSITION:RELATIVE;BOTTOM:1EX; 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:
sup {position:relative; bottom:1ex;} Sub {position:relative; bottom: -1ex;}
ConclusionIt is important to keep an eye on the growing CSS technology so that you can master all the skills of the tools you hold. You might need to use these complex units to solve a particular problem that you may encounter in the future. Take the time to read new technical specifications, sign up for some nice websites or resources, like cssweekly . Of course don't forget to register now like Tuts + website to get weekly updates, courses, free tutorials and resources!
Transfer from Bole Online
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
