In CSS style sheets, we often see pt, px, em, ex, in and other such units of length. What do they mean and what is the difference?
I wrote another HTML example to test cm.
In the CSS style sheet, there are two types of length units:
Relative length unit, such as px, em, etc.
Absolute length unit, such as pt, mm, etc.
Also talk about the difference between px and pt
I often see people compare px with pt, mainly to argue what CSS length unit is better when determining font-size or other CSS property sizes. Some people say that it is better to use pt, because pt is an absolute length unit and will not change because of the screen resolution or other factors.
I did a test and wrote such an HTML example. code show as below:
<html>
<head> <title> The difference between CSS unit length-the difference between px and pt </ title> </ head>
<body>
<p style = "font-size: 20pt;"> Font-size is 20pt </ p>
<p style = "font-size: 20px;"> Font-size is 20px </ p>
</ body>
</ html>
Because px can accurately represent the position and size of the element on the screen,
I adjusted my monitor to 1024 * 768 and 800 * 600 resolution (refer to screen resolution). Whether the font set with pt or px changes with the resolution. (The browser I use is IE6, other browsers have not been tested.)
When all length units are displayed on the screen, they are converted into pixels first.
I wrote another HTML example, test cm (centimeter). code show as below:
<html>
<head> <title> The difference between CSS length units-the difference between pt, px and cm </ title> </ head>
<body>
The following div has a width of 300pt and a height of 30pt: <br>
<div style = "width: 300pt; height: 30pt; border: 1px solid blue;"> </ div>
The following div has a width of 300px and a height of 30px: <br>
<div style = "width: 300px; height: 30px; border: 1px solid blue;"> </ div>
The following div has a width of 10cm and a height of 3cm: <br>
<div style = "width: 10cm; height: 3cm; border: 1px solid blue;"> </ div>
</ body>
</ html>
The result is that cm (centimeter) also changes with the resolution of the display.
For computer screen devices, pixel (Pixel) or px is the most basic unit, it is a point. All other units are converted into a fixed ratio with pixels. When all length units are displayed based on the screen, they are converted into pixels first and then displayed. Therefore, as far as the computer screen is concerned, there is no essential difference between the relative length and the absolute length. Any unit is actually a pixel, the only difference is the ratio.
Because px can accurately represent the position and size of the element on the screen, the web page is mainly for screen display.
If the discussion is extended to other output devices, such as printers, the basic length unit may not be pixels, but other units that are consistent with the measurement units in life.
CSS absolute length unit is for output device (output device). Take pt for example, this is a font unit that is very commonly used in text typesetting tools (w ord, adobe, etc.), regardless of whether your monitor resolution is 1024 * 768 or 800 * 600, the same document is printed on paper The result is the same.
Web pages are mainly for screen display, not for printing and other needs.
Which unit of length is better for writing web pages, is it px or pt?
I personally prefer px, because px can accurately represent the position and size of the element on the screen. The web page is mainly for screen display, not for printing and other needs.
CSS relative length unit (relative length unit)
Output device). Take pt for example, this is a typesetting tool.
The relative word in CSS relative length unit indicates that its length unit will change with the change of its reference value, not fixed.
The following is a list of CSS relative length units:
CSS relative length unit
The height of the element's font
The height of the letter "x"
px pixels
% Percentage
CSS absolute length unit
Absolute length unit is a fixed value. For example, we commonly use mm, which means millimeter.
The following is a list of CSS absolute length units:
CSS absolute length unit
in inches Inches (1 inch = 2.54 cm)
cm Centimeters
mm Millimeters
pt Points (1 point = 1/72 inch)
pc pickups Picas (1 pickup = 12 points)
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
