What role does pt, px, em, and rem play in css? csspx

What role does pt, px, em, and rem play in css? csspx

Some time ago, I finally learned pt, px, em, and rem carefully and made a simple record.

 

What are pt, px, em, and rem?

PtThe unit name is Point and the absolute length unit. Currently, the web page rarely or even does not appear. It is often used in the printing industry.
Unit conversion: 1in = 2.54 = 25.4mm = 101.6q = 72pt = 6 pc = 96px

PxThe unit name is pixel, the unit of relative length, and pixel px is relative to the display screen resolution. Pixels are widely used.

EmThe unit name is the unit of relative length. It does not have a fixed value, which is relative to the font size of the text in the current object. If the font size of the text in the row is not set manually, the default font size is relative to that of the browser.

RemIs a new relative unit (root em, root em) added by CSS3. rem is a relative unit and a relative HTML root element.

Features and relationships

PtIs a standard length unit, 1 pt = 1/72 inch, commonly used in printing, in AI, PS and other design software, the font size unit is pt, it is very popular and useful in the advertising and printing industry. However, in the web page, pt almost never appears.
Advantage: Suitable for the printing industry
Disadvantage: the Web page is almost useless.

PxIs the smallest unit displayed on the screen, so it is very popular in the web page, because precision is also very intuitive and convenient. Some design classes also use px.
Advantage: accurate and stable
Disadvantage: After the page is zoomed in or out in the browser, the page may be messy.

EmThis unit is relatively powerful. It is a relative length unit and has variable elastic features. This unit is also favored by most front-end designers. Because it is a relative value, we can set 1em, 0.5em, 0.25em, and so on, and support three digits after the decimal point, the page will also be adjusted accordingly as the page is zoomed in and out.
Advantage: flexible changes
Disadvantage: It inherits the font size of the parent element.

RemThis unit is more powerful than em. It combines the advantages of relative size and absolute size. It allows you to adjust the font size proportionally only by modifying the root element, it can also avoid the chain reaction of compound font size layer by layer. At present, all browsers except IE8 and earlier versions support rem.
Advantage: more flexible and user-friendly, not influenced by parent-level elements

Disadvantage :... Forgive me for not coming out.

 

 

Difference between pt and px

Both pt and px are actually applied to the printing industry. In web or app, px is more accurate and will not be changed after setting. Pt may change according to the pixel density of the monitor, because px is the relative unit and pt is the absolute unit.
For browsing purposes, we recommend that you use px to define the font size. Using px to define text will not change the size no matter how you set it. Using pt to define text, when the user sets a value that exceeds 96 DPI, the larger the value, the larger the font.
Conversion formula:Px = pt * DPI/72

Difference between em and rem

 

I used to use em as a website. Wow! This element is really useful. Later I found rem, and I thought it was even better to find a treasure than em. Both em and rem are actually flexible because they are both a relatively flexible and scalable unit. Generally, it is converted from a browser to a specific pixel value. The converted value depends on the font size.

 

It can be said that both units can make our web or app interface design more flexible. Since both can achieve the same effect, what is the specific difference?

• The translation of rem units into pixel values is determined by the font size of html elements. This font size is affected by the font size setting in the browser, unless a specific unit is explicitly rewritten.
• The unit of em is converted to the pixel value, depending on the font size they use. The font size is inherited from the parent element, unless explicitly rewritten with a specific unit.

 

 

How to convert

In the past, px was used, and many problems were discovered during adaptive processing. It was ecstatic to find em and rem. However, the conversion between px and em is a headache. Let's take a look at how it is converted.
Mutual conversion between em and px: the default font height of any browser is 16 px. All unadjusted browsers match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. For ease of use, when em is used, we usually declare font-size = 62.5% in the body selector in CSS (to change the em value to 16px * 62.5% = 10px). Then, you only need to divide the px value you use by 10 to get the em value, for example, 12px = 1.2em, 10px = 1em.

If your brain turns slowly or you are too lazy, use tools to convert it like me. Http://pxtoem.com/