In the CSS style sheet, we often see such length units as PT, PX, em, ex, in. What do they mean and what are the differences?
In the CSS style sheet, the length unit is divided into two types:
It is often seen that the comparison of PX and PT is mainly to argue what type of CSS length unit is better when determining the font-size or other CSS attributes. Some people say it is better to use PT because PT is an absolute length Unit and will not be changed because of screen resolution or other factors.
I did a test and wrote such an HTML example.CodeAs follows:
<HTML>
<Head> <title> difference in CSS unit length-difference between Px AND Pt </title><Body><P style = "font-size: 20pt;"> font-size is 20pt </P><P style = "font-size: 20px;"> font-size is 20px </P></Body></Html>
Click Browse File
I adjusted my display to 1024*768 and 800*600 respectively (screen resolution ). Both PT and PX fonts change with the resolution. (The browser I use is IE6 and has not been tested on other browsers .)
I wrote another HTML example to test cm (cm ). The Code is as follows:
<HTML><Head> <title> difference in CSS length units-difference between PT, PX, and CM </title><Body>The following Div has a width of Pt and a height of 30 PT: <br><Div style = "width: 300pt; Height: 30pt; Border: 1px solid blue;"> </div>The following div is Px in width and 30px In height: <br><Div style = "width: 300px; Height: 30px; Border: 1px solid blue;"> </div>The following Div has a width of 10 cm and a height of 3 cm: <br><Div style = "width: 10 cm; Height: 3 cm; Border: 1px solid blue;"> </div></Body></Html>
Click Browse File
As a result, CM (CM) also changes with the display resolution.
Pixel or PX is a basic unit of a computer's screen device, which is a point. All other units have a fixed proportional Conversion Relationship with pixels. When all length units are displayed on the screen, they are converted to the number of pixels first and then displayed. Therefore, there is no essential difference between relative length and absolute length in computer screens. All units are actually pixels, and the difference is only different proportions.
If we extend the discussion to other output devices, such as printers, the basic length units may not be pixels, but other units that are consistent with the measurement units in life.
The absolute unit of CSS length is for the output device. For PT, This is a commonly used font unit in text formatting tools (such as Word and Adobe), whether your display resolution is 1024*768 or 800*600, the results of printing a document on paper are the same.
Which length unit is better for writing a webpage? Is it PX or PT?
I personally prefer PX, because PX can accurately represent the position and size of elements on the screen. webpages mainly aim at screen display, rather than printing and other needs.
Relative Length Unit)
The two characters in the unit of relative length of CSS indicate that the unit of length changes with the change of its reference value, which is not fixed.
The following is a list of CSS relative length units:
| Unit of relative CSS Length | Description |
| Em | Element font height the height of the element's font |
| Ex | The height of the letter X of the letter "X" |
| Px | Pixel pixels |
| % | % Percentage |
The absolute length unit is a fixed value. For example, we often use mm, which means mm.
The following is a list of absolute CSS length units:
| Absolute CSS length unit | Description |
| In | Inch inches (1 inch = 2.54 cm) |
| Cm | Centimeter centimeters |
| Mm | Millimeter millimeters |
| PT | Point Points (1 point = 1/72 inch) |
| PC | Pickup PICAS (1 pickup =) |
Source: breaphup
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
