px (pixels) relative length units
This should be a domestic use of more units, meaning pixels, is your screen device physically can show the smallest point, this point is not fixed width. The length and width of points on different devices may vary. For example, the display is divided into very small squares, each of which is a pixel. On the surface it seems to be easy to understand, in fact, the size of the PX is affected by the resolution of the screen, that is, the way the screen is divided into their respective ways. For example, a font of 100px size, if the display uses a resolution of 800x600 pixels, then the width of each word is 1/8 of the screen. If you set the display's resolution to 1024x768 pixels, it is also a 100px font with a width that is 1/10 of the width of the screen.
- 1. IE cannot adjust the font size using PX as the unit;
- 2. Most of the foreign sites can be adjusted because they use EM or REM as font units;
- 3. Firefox can adjust PX and em,rem, but more than 96% of Chinese netizens use IE browser (or kernel).
em relative length units
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.
- 1. The value of EM is not fixed;
- 2. Em inherits the font size of the parent element.
rem Relative length unit
REM is a new relative unit of CSS3, and this unit has aroused wide concern. What is the difference between this unit and EM? The difference is that when you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM. For browsers that do not support it, the workaround is simple enough to write an absolute unit statement. These browsers ignore font sizes that are set with REM. Here is
An example:
p {font-size:14px; font-size:.875rem;}
pt Absolute Length Unit
PT does not use much, PT effect is not with the browser resolution changes and the law God vision changes, always look the same big tag:html, HTML5, Web, PT
PX, PT, EM, rem differences
