CSS: seven units you may not know

CSS: seven units you may not know

 

As we all know, when CSS technology is used, it is often stuck by some strange problems. But when we face new problems, this will make us very unfavorable.

However, with the development of Web, new solutions are gradually maturing. Therefore, as a Web design and front-end developer, we have no choice but to understand and use the tools or attributes we use.

This also means that for those special tools or attributes, even if they are rarely used, we can apply them to our work as needed.

Today, I will introduce some CSS attributes that you may not know before, such as px and EMS measurement units, but it is very likely that you have never heard of them before. Let's take a look.

Rem

Start with a unit that we are already familiar with but is very similar. Em is defined as the font size relative to the text in the current object. If you set a font size for the body element, the em value of any child element of the body is equal to the font-size set by the body.

Test

 

body {    font-size: 14px;}div {    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}

 

The font size in the div is 1.2em, that is, 1.2 times the font size inherited by the div from the parent element. Here, the body font is 14px, And the div font size is 1.2*14 = 16.8px.

However, what if you use em to horizontally define the font size of nested elements? In the following code, we apply the same CSS as above. Each div inherits the font size from its parent element at the upper level and gradually increases.

Test Test Test

 

Although this is what we want in some places, we usually want to rely on a single relative measurement unit. In this case, rem should be used. r in rem represents the root element, and its value is the font size set by the root element. In most cases, the root element is html.

html {    font-size: 14px;}div {    font-size: 1.2rem;}

 

In this way, the font size of the three nested div dolls above is 1.2 * 14px = 16.8px.

Applicable to grid layout

Rems not only applies to the font size, but also for grid layout. For example, you can use rem Based on the font size of the html root element as the size unit of the entire grid layout or UI library, and then use em unit in other specific places. This will give you more control over the font size and scaling,

.container {    width: 70rem; // 70 * 14px = 980px}

 

In terms of concept, the idea of this method is to scale your interface according to your content. However, this does not make sense in all situations.

VL and vw

Responsive Web design is highly dependent on percentage rules. However, for each problem, CSS percentage is not the best solution. The CSS width is relative to the width of the nearest parent element containing it. If you want to use the height or width of the view, rather than the parent element, do you want to be swollen? In this case, the service can meet this requirement.

The height of a 1 Gbit/s or 1% Gbit/s view. For example, if the browser height is 900px, 1ku = 900*1% = 9px. Similarly, if the width of the browser is 750px, 1vw is 7.5px.

They are widely used. For example, we can use only one line of CSS code to implement boxes with the same screen height.

.slide {    height: 100vh;}

 

Suppose you want a title with the same width as the screen, you just need to set the font-size unit of the titlevmThe font size of the title is automatically scaled according to the browser width to synchronize the font and viewport size ?!

Demo

Vmin and vmax

The width and height of the SLS and VWS are the relative values of the width and the maximum values of the SLS, while the vmin and vmax values are the minimum or maximum values of the SLS and widths. For example, if the browser's height and width are 700px and 1100px, 1 vmin = 7px, 1 vmax = 11px, and 1 vmin = 8px if the height and width are 1080px and 800px respectively, 1 vmax = 10.8px.

So when do we need these values?

Suppose there is an element, you need to make it always visible on the screen. You only need to use the vmin unit for its height and width, and assign it a value lower than 100. For example, you can define a square with at least two sides touching the screen:

.box {    height: 100vmin;    width: 100vmin;}

 

If you want to make the square box always overlay the visible area of the entire view (the four sides always touch the four sides of the screen ):

.box {    height: 100vmax;    width: 100vmax;}

 

Using these units together can provide us with a novel and interesting way to flexibly utilize the size of our views.

Ex and ch

The Unit ex and ch are similar to em and rem, depending on the current font size and font size. However, unlike em and rem, ex and ch are font-based measurement units and depend on the Set Font.

The Unit ch is usually defined as the width of the number 0. You can find some interesting discussions about it in Eric Meyers's blog. For example, you can set the width of the letter "N" in an equal-width font to 40ch, in another type of font, it can contain 40 letters. The traditional use of this unit is mainly for the layout of Braille, but there must be other places where it can be applied.

The Unit ex is defined as the lowercase x height of the current font or an em of 1/2. Most of the time, it is the middle sign of the font.

X-height; the height of the lower case x (read more about The Anatomy of Web Typography)

They have many purposes, but most of them are used for fine-tuning the layout. For example, the sup element (delimiter) can be usedposition:relative;bottom: 1ex;Similarly, you can implement a scalar text. By default, the browser uses the vertical alignment rules of superscripts and subscripts. However, if you want more fine-grained control, you can do the following:

sup {    position: relative;    bottom: 1ex;}sub {    position: relative;    bottom: -1ex;}

 

Summary

It is very important to keep an eye on the development and expansion of CSS so that you can use the specific tools in your toolbox. Maybe you will need to use these complicated units to solve a special problem in the future. Take some time to read new technical specifications and register and subscribe to some good websites or resources, similarCssweeklyThis is the case. Of course, do not forget to register a website like Tuts + for weekly updates, courses, free tutorials, and resources now!

Additional reading

More CSS unit goodness.

Taking the "Erm .." Out of EmsTaking EMS Even FurtherCaniuse Viewport units