CSS sinkhole I-font units

First of all, the "pit" discussed in this article is presented in the form of a responsive web design (responsive), which is not a pit if you're just doing traditional web design, because traditional web pages are dead, Does not automatically adjust the screen size of all types of equipment does not naturally produce any size change problems. Conversely, to provide the best reading or usage experience for users on different devices, we inevitably measure and control the size of elements or fonts. It is the size of the font, I do not know if you have the following experience

Same page, same style sheet, but:

• Fonts are pretty on Mac, but it's hard to see in Windows?
• The text is in the correct position on the PC, but the wrong bit on the ipad?
• The text block fits on Chrome, but it gets longer, even if it's changed.

If it is unfortunate to be said, then really have to check the style sheet of font size units and row height used by the correct unit. In CSS3 we can apply a lot of font units, such as: PT, px, EM, REM and percent (here only the font units, for VW/VH such element length units are not discussed in this category), what are the specific meanings of these units, where to use, choose which unit in RWD is the most suitable? Then first one to understand their meaning and usage and then make a choice for the specific application. Lattice units (PT)

PT is a point (LB) abbreviation and is a fixed-length unit of measure with a size of 1/72 inches. If you use PT for text on the web, the font size is the same as in different screens (the same resolution), which can have an impact on typography, but it is quite handy to use PT in Word. Because the main purpose of using Word is not for screen browsing, it is output printing. When printing to the entity, PT as a natural length unit is convenient and practical: for example, word in the ordinary documents are used "9pt", the title with "Blackbody 16pt" and so on, no matter how the computer set, print it is always so big.

Visible if PT is the preferred font unit on the web that's a big hole! PT applies only to print and plain document text layout and not to the web.

Pixel units (px)

The length is determined based on the resolution of the monitor, which is used in older Web applications, and pixels are relative to the display screen resolution. For example, the resolution used by wondows users is typically 96 pixels per inch. The resolution used by Mac users is typically 72 pixels per inch.

Two relationships: one inch =72pt (dots) =96px (pixels), most commonly used in Web pages: 9pt=12px

PX itself is a great pit, and most people are willing to jump in. Screen relative to the same resolution it is a specific and accurate unit of measurement, we use it as a vector diagram is also most like using this unit (PX value is absolute), all browsers are also default to use PX as the measurement unit of size, so in the web design, PX is used as the standard size unit. When there is no interactive internet age, this is the right choice without RWD, but the times have changed. PX does not work with variable font size scenarios, and it produces typographic distortions.

pixel units vary depending on the screen resolution and are not intended to be used as the preferred unit of measure for pages displayed on various devices.

Relative length unit (EM) EM is a relative length unit relative to the size of the parent node, which can be understood as a percentage unit of the font size, but unlike a percentage, EM is a default constant value, and when the parent node font size is not explicitly specified, The default font height (line-height) for any browser is 16px. So unadjusted browsers are compliant: 1EM=16PX, then 12px=0.75em, 10px=0.625em. This is a very common conversion formula. EM is the most suitable standard font size for RWD, supports font scaling, fine-tuning based on screen resolution and display differences between different browsers, ensuring that fonts are on different devices, maintaining visual and design accessibility. It is worth noting that since the relative units must have a reference (element), if the reference does not exist on the side of the 16px as the true size. With this theory we can add the following code to the beginning of the style sheet for our site:

{ font-size: 100%;  }{ font-size: 0.75em;}  { font-size: 2em;}

If we want to change the default rule for 1em=16px, such as 1em=12px can be written like this:

{ font-size: 75%;  }{ font-size: 1em;}  { font-size: 2em;}

If we want the fonts on the desktop to be more granular, and the fonts that appear on the mobile device to be clearer, you can write them like this:

{ font-size: 75%;  }{    html {font-size: 100%;} }

 The above is the simplest example to help us understand the use of EM, while in practical applications we need to solve the other problem: the default element style. Various browsers have different default styles for different standard elements, which are fonts. It is necessary to explicitly override these styles in the style sheet to ensure compatibility between browsers if you want to preserve the font's accessibility. such as: Li's font will be in accordance with the UL font size calculation relative size:

{ font-size: 75%;  }{ font-size: 1em;}  { font-size: 0.833em;}

of course button, H1~h6, summary, detail and many other elements need to carry out this standardization process, if you feel this work is very troublesome can also go to download the famous NORMALIZE.CSS style sheet to complete this reset work, although it looks very troublesome, However, this avoids the unnecessary and time-consuming adjustments that can result from the size of the project as a whole.    Relative root node length unit (REM)

CSS3 introduces a new font size unit REM, which can be simply remembered as Root RM.

CSS3 's appearance, he also introduced some new units, including what we call REM today. The "font size of the root element" is described in this web site. Let's get a detailed understanding of REM.

EM units are relative to the parent node of the font-size, there will be some combinatorial problems, and REM is relative to the root node (or HTML node), meaning you can define a separate font size in the HTML node, and then all other elements are set using REM relative to the percentage of the font

Let's look at a simple code example:

{ font-size: 62.5%; /* 10÷16x100% = 62.5% */}  { font-size: 1.4rem;  /**/}{ font-size: 2.4rem;  /*2.4x10px = 24px*/}

I defined a basic font size of 62.5% (that is, 10px) in the root element. Setting this value is mainly convenient for calculation, if not set, it will be "16px" as the benchmark). From the results above, we use "REM" as convenient as using "px", and also solve the difference between "px" and "em".

If you are accustomed to using PX as a unit of measurement and want to use the relative units of REM, then we can do a simple mixin:

@base-font:12px; @mixin font-size (@font-size) {    font-size: @font-size;     font-size: (@font-size/@base-font-size) *1rem;} {}

  关于兼容性的考虑REM is a new unit of measurement introduced by CSS3, and we are sure to worry about browser support. There are still quite a few browsers supported, such as Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, ie9+ and opera11+. Just poor ie6-8 doesn't support it. However, the use of units to set the font, can not completely consider IE, if you want to use this REM, but also want to be compatible with the effect of IE, you can consider "px" and "REM" with the use of "px" to achieve ie6-8 effect, and then use "REM" to achieve the effect of the browser.