What units are there in css?

css units are: %, percentage; in, inch; cm, centimeter; mm, millimeter; em; pt, pound (1pt is equal to 1/72 inch); pc, 12-point movable type (1pc is equal to 12 points ); px, pixel (a point on the computer screen); vw, the full screen width is 100vw; Vh, the full screen height is 100vh.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

% Percentage

in inches

cm cm

mm mm

em

1em is equal to the current font size.

2em is equal to twice the current font size.

For example, if an element is displayed at 16px, then 2em is 32px.

In CSS, em is a very useful unit because it automatically adapts to the font the user is using.

ex An ex is the x-height of a font. (x-height is usually half the font size.)

pt points (1 pt equals 1/72 inch)

pc 12-point type (1 pc equals 12 points)

px pixel (a point on the computer screen)

vw: (value 1-100), understand that the full screen width is 100vw, adaptive to the screen.

Vh: (value 1-100), understand that the full screen height is 100vh, adaptive screen.

Extended information:

1. The problem of em and px

What is px?

px pixels (Pixel). Relative length unit. Pixels px are relative to the monitor screen resolution. (Quoted from CSS2.0 manual)

em is a relative length unit. The font size relative to the text within the current object. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size. (Quoted from CSS2.0 manual)

PX features

1. IE cannot adjust the font size that uses px as the unit;

2. The reason why most foreign websites can be adjusted is that they use em or rem as font units;

3. Firefox can adjust px and em, rem, but more than 96% of Chinese netizens Use IE browser (or kernel).

What is em?

em refers to the font height. The default font height of any browser is 16px. So unadjusted browsers comply with: 1em=16px. Then 12px=0.75em, 10px=0.625em. In order to simplify the conversion of font -size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

em features:

1em refers to the size of a font. It will inherit the font size of the parent element, so it is not a fixed value. The default font size for any browser is 16px. Therefore, 12px = 0.75em. In order to facilitate conversion in actual applications, the style is usually set as follows:

CSS code

html { font-size: 62.5%; }

In this way, 1em = 10px. The commonly used 1.2em is theoretically 12px. However, this conversion does not hold in IE browser. 1.2em will be slightly larger than 12px. The solution is to change 62.5% in the html tag style to 63%, that is:

CSS code

html { font-size: 63%; }

In Chinese articles, there are usually two spaces at the beginning of the paragraph. If px is used as the unit, 24px needs to be left out for a 12px font, and 28px needs to be left out for a 14px font... This conversion is very unusable. If you use the em unit, this problem can be easily solved. The size of one word is 1em, and the size of the two words is 2em. Therefore, just define it like this:

CSS code

p { text-indent: 2em; }

The difference between em and px font units

The font unit should be em instead of px. Simply put, it supports font scaling under IE6. If you press the ctrl wheel on the page, the website with fonts in px will not respond. px is an absolute unit and does not support IE scaling, and em is a relative unit.

When I was adjusting this blog, I found that not only the font, but also the line spacing (line-height) and vertical height units were all in em. Ensure integrity when scaling.

em has the following characteristics: the value of

1. em is not fixed;
2. em will inherit the font size of the parent element.

em rewriting steps:

1. State Font-size=62.5% in the body selector;
2. Divide your original px value by 10. Then replace em as the unit;

   Simple, if only the above two steps can solve the problem, no one may use px. After the above two steps, you will find that the font size of your website is unexpectedly large. Because the value of em is not fixed and will inherit the size of the parent element, you may set the font size in the content p to 1.2em, which is 12px. Then you set the font size of selector p to 1.2em, but if p belongs to the child of content, the font size of p is not 12px, but 1.2em= 1.2 * 12px=14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent element body, which is 16px * 62.5% * 1.2=12px, and p is its child, and em inherits the font height of content. , which is 12px. So 1.2em of p is no longer 12px, but 14.4px.

3. Recalculate the em value of those enlarged fonts. Avoid repeated declarations of font size, that is, avoid the 1.2 * 1.2 = 1.44 phenomenon mentioned above. For example, if you declare the font size in #content to be 1.2em, then when you declare the font size of p, it can only be 1em, not 1.2em, because this em is not that em, and it inherits the font height of #content. It became 1em=12px.

   12px Chinese characters in IE:

   When completing the em conversion, I also discovered a strange phenomenon, that is, the 12px (1.2em) Chinese characters obtained by the above method are not equivalent to directly using 12px in IE. The defined font size is slightly larger. You only need to change 62.5% to 63% in the body selector and it will display normally. The reason may be that when IE processes Chinese characters, the accuracy of floating point values ​​is limited. This phenomenon only occurs for 12px Chinese characters and does not exist in English. The solution is to replace 62.5% in style.css with 63%.

A px, em, pt unit conversion tool:

Address: http://pxtoem.com/

2. rem features

    rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

Example:

p {font-size:14px; font-size:.875rem;}

Note:

    选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

The above is the detailed content of What units are there in css?. For more information, please follow other related articles on the PHP Chinese website!