Home > Developer > Web Develop
In CSS style sheets, we often see such units of length such as PT, Px,em,ex,in, and so on. What do they mean, what's the difference?
In CSS style sheets, the length units are divided into two types:
Often see the PX and PT comparison, mainly to argue in determining the font size (font-size) or other CSS property size, with what kind of CSS length unit is better. Some people say that it is better to use PT because PT is an absolute length unit and does not change due to screen resolution size or other factors.
I went to do a test and wrote such an HTML example. The code is as follows:
<body >
<p style = "FONT-SIZE:20PT;" >font-size is 20pt</p>
<p style = "font-size:20px;" >font-size is 20px</p>
</body>
I tuned my monitor to 1024x768 and 800*600 resolution (referred to as screen resolution). Regardless of whether the font is set in PT or PX, it varies with the resolution. (I am using a IE6 browser that has not been tested on other browsers.) )
I wrote another HTML example to test cm (cm). The code is as follows:
<body >
The following div width 300pt, height 30pt: <br>
<div style = "width:300pt;height:30pt;border:1px solid blue;" ></div>
The following div width 300px, height 30px:<br>
<div style = "width:300px;height:30px;border:1px solid blue;" ></div>
The following div width 10cm, height 3cm: <br>
<div style = "width:10cm;height:3cm;border:1px solid blue;" ></div>
</body>
As a result, cm (cm) also varies with the display resolution.
For a computer's screen device, a pixel (Pixel) or PX is the most basic unit, a point. All other units are in a fixed proportional conversion relationship with pixels. All length units are based on the display of the screen, and are uniformly converted to the number of pixels before being displayed. Therefore, the relative length and absolute length have no essential difference in terms of the computer's screen. Any unit is actually pixels, the difference is only the proportion of different.
If you extend the discussion to other output devices, such as printers, the basic unit of length may not be pixels, but other units that correspond to the units of measure in your life.
The absolute length of the CSS unit is for output devices. For PT, this is a very common font unit in the Typography tool (Word,adobe, etc.), regardless of whether your display resolution is 1024x768 or 800*600, the same document is printed on paper as a result.
Which length unit is better for writing web pages, px or PT?
I personally prefer PX, because PX can accurately represent the position and size of the elements on the screen, the Web page is mainly for the screen display, not for the sake of printing and other needs.
CSS Relative length units (relative length unit)The relative two words in the relative length unit of CSS indicate that the unit of length will change with its reference value, not fixed.
The following is a list of CSS relative length units:
| CSS relative length units | Description |
| Em | The height of the element ' s font |
| Ex | The height of the letter "x" |
| Px | Pixel pixels |
| % | Percent percentage |
The absolute length unit is a fixed value. For example, we used to have mm, is the meaning of millimeters.
The following is a list of CSS absolute length units:
| CSS Absolute Length units | Description |
| Inch | inch inches (1 inch = 2.54 cm) |
| Cm | CM centimeters |
| Mm | MM millimeters |
| Pt | Point points (1 points = 1/72 inches) |
| Pc | Pickup picas (1 pickup = 12 points) |
Detailed description of length units such as PT, PX, EM, ex, in, etc. in CSS
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
