|
Most domestic designers like to use px, while most foreign websites like to use em and rem, so what is the difference between the three, and what are the advantages and disadvantages of each? Let's give you a detailed introduction. PX features: 1. IE cannot adjust the font size of those that use px as a unit; 2. The reason why most foreign websites can be adjusted is that they use em or rem as font units; 3. Firefox can adjust px, em, and rem, but more than 96% of Chinese netizens use IE browser (or kernel). px pixels. Relative length units. Pixel px is relative to the screen resolution of the monitor. (Quoted from CSS2.0 manual) em is a relative unit of length. Font size relative to the text within the current object. If the font size of the text in the line is not artificially set, it will be relative to the default font size of the browser. (Quoted from CSS2.0 manual) The default font height for any browser is 16px. All unadjusted browsers comply: 1em=16px. Then 12px=0.75em, 10px=0.625em. To simplify the font-size conversion, you need to declare font-size=62.5% in the body selector in css, which makes the em value 16px*62.5%=10px, so that 12px=1.2em, 10px=1em, which means you only need to divide your original px value by 10, and then replace it with em as the unit. EM features: 1. The value of em is not fixed; 2. em inherits the font size of the parent element. So when we write CSS, we need to pay attention to two things: 1. Declare font-size=62.5% in the body selector; 2. Divide your original px value by 10 and replace it with em as the unit; 3. Recalculate the em values of those enlarged fonts. Avoid repeated declarations of font size. That is, to avoid the phenomenon of 1.2 * 1.2 = 1.44. For example, if you declare the font size of 1.2em in #content, then when declaring the font size of p, it can only be 1em, not 1.2em, because this em is not that em, and it becomes 1em=12px because it inherits the font height of #content. REM features rem is a new relative unit (root em) added to CSS3, which has attracted a lot of attention. 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 the relative size, but the relative is only the HTML root element. This unit can be said to combine the advantages of relative size and absolute size, through which it can not only modify only the root element to adjust all font sizes proportionally, but also avoid the chain reaction of compounding font sizes layer by layer. Currently, rem is supported in all browsers except IE8 and earlier. For browsers that don't support it, the response is also very simple, which is to write an absolute unit statement. These browsers ignore the font size set with rem. Here's an example: p {font-size:14px; font-size:.875rem; } Note:The choice of font units is largely up to your project, and if your user base is using the latest version of the browser, then REM is recommended, if compatibility is a concern, then use px, or both. Here is a px, em, rem unit conversion tool address:http://pxtoem.com/
| 
Posted on 3/21/2017 9:31:50 AM
|
|
|
