1, px
Pixels (Pixel). Relative length units. Pixel px is relative to the display screen resolution.
The smallest point that a screen device can physically display is not a fixed width, and the aspect ratio of points on different devices may be different or not necessarily a square of 1:1. For example, a monitor on the 1px wide =1mm, but B monitor 1px wide =2mm, if the definition of a div width for the 100px,a monitor see on the div is 10cm,b on the monitor to see that the div is 20cm.
2. PT
lbs, a unit commonly used in the printing industry, equals 1/72 inches, representing an absolute length, typically used for page printing and typesetting.
PX and PT conversion rules: PT=PX*3/4.
3, EM
The EM essence is a relative value, not a specific number, so a reference point is required, usually based on the font-size of <body>, or the EM value of any child element of the BODY element equals the size of the font-size setting.
The default font height for any browser is 16px. All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.
Because EM is calculated relative to the parent element, each layer inherits the EM value from the parent element, so that the value of EM is not fixed, in the case of multiple layers of nesting.
Html:
<body> <div id= "Div1" ><!--* 1.2 = 16.8px--> <div id= "div2" ><!--16.8 * 1.2 = 20.16px--> <div id= "Div3" ><!--20.16px * 1.2 = 24.192px--> </div> </div> </div> </body>
Css:
body {
font-size:14px;
}
div {
font-size:1.2em;
}4. rem
EM problem: Child element settings, need to know the size of the parent element.
Workaround: REM is relative to the root element
Html:
<body> <div id= "Div1" ><!--* 1.2 = 16.8px--> <div id= "Div2" ><!--14 * 1.2 = 16.8px--> <div id= "Div3" ><!--* 1.2 = 16.8pxpx--> </div> </div> </div> </body>
Css:
HTML {
font-size:14px;
}
div {
font-size:1.2rem;
}In addition to IE6-IE8, other browsers support EM and REM.
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
