真人街机捕鱼

Your Position: Home > News > Tsu City Website Development

How to use the unit of length (px, em, ex, rem) in web site development, after reading this is enough!

Date: 2017-3-9 11:05:27 Popularity: label:
share to:
As a front-end developer, the units of length in css are nouns we are very familiar with at work, because without them, we cannot declare how large a certain character should be, or how much white space should be left around some images, and even Can cause css not to work properly, so in many css properties, they all depend on the unit of length to display various page elements.

1. What are the units of length?

The unit of length is actually very common in our life, for example, centimeters, millimeters, inches, and the pixels (px) that are often contacted, the font height of the element (em), the height of the letter x (ex), and percentage (%) And so on, but we can all put them into two categories: the first category is the absolute length unit; the second category is the relative length unit.

2.Absolute length unit

What is an absolute length unit? What are the specifics? How does it work?
The absolute unit of length is easier to understand, it is a fixed value, a real physical value, it is not a unit of length that is affected by the device or affected by other factors.
Specific absolute length units include the following:
1), cm, centimeter: a unit of measurement of length, 1m = 100cm.
2), mm, millimeter: same as centimeter, it is also a unit of measurement of length, 1cm = 10mm; millimeter is also a unit of measurement of rainfall.
3), in, inch: This is a unit on American rulers, 1 inch = 2.54 cm, 12 inches = 1 inch.
4), pt, points: A printing unit of measure, 1 inch is equivalent to 72 points. For example, if the element p is set to 24 points, it is a third (1/3) of 1 inch; therefore, p {font-size: 24pt;} is equivalent to p {font-size: 0.33in;}.
5), pc, Picas: A printing term, 1 pic card is equivalent to 12 points, 6 pic cards is equivalent to 1 inch.

Of course, because these units are absolute length units, they are less used in our web development, mainly because absolute length units are not conducive to the rendering of page screens, and they are more commonly used in printing, printing, and other directions.

3. Relative length units We all see more relative length units, for example, px, em, ex, rem; these are relative length units.
1) px, pixel: px is relative to the screen resolution of the monitor. When using px to set the font size, it may be more stable and accurate. However, there are some problems with this method, for example: IE cannot adjust the font size of those using px as a unit; most foreign websites can adjust it because it uses em or rem as the font unit; Firefox can adjust px and em, rem , But more than 96% of Chinese Internet users still like to use IE browser. In order to ensure the user experience and the effect of the web page, a unit of length "em" is also introduced in web development.

2) em, the font height of the element: em is calculated relative to the attribute value of the parent element, so em is a non-specific value. It requires a reference point, which is generally based on the "font-size" of the <body>. The default font height for any browser is 16px. All unadjusted browsers fit: 1em = 16px. Sometimes in order to simplify the conversion of font-size, you need to declare font-size = 62.5% in the body selector in the css, at this time 1em = 16px * 62.5% = 10px, so 12px = 1.2em, 10px = 1em, that is to say When converting, simply divide the original px value by 10, and then replace it with em as the unit. The value of em is not fixed; the value of em inherits the font size of the parent element.

3) ex, the height of lowercase x in all font elements: This is mainly related to the font. Even if the same font size is set for different fonts, the value of ex may be different, mainly because the x height of the font may be different. However, this is rarely used in our actual development. Generally, after setting em, ex will default to half of em. For convenience of calculation, 1ex is assumed to be equal to 0.5em because the lowercase letters of most fonts are corresponding. Capital letters are half the height.

4) rem, element font height: Compared with em, there is more "r", which is a new relative unit of CSS3. It is root em, short for rem. The difference between this unit and em is that rem is used to set the font for the element. In small hours, rem is only relative to the root HTML element. With rem, it is possible to adjust all font sizes proportionally only by modifying the root element, and to avoid the chain reaction of font size compounding layer by layer. At present, all browsers except IE9 and below support rem.

In addition, we need to pay attention to two points in development:
First, if rem does not specify a reference value in the root element (html font), the browser defaults to 1 rem is 16px. If rem has a specified value, 1rem is equal to the specified value.
Secondly, it will be invalid when the html is set to 62.5% or 10px, because the font size smaller than 12px or 75% does not support conversion. This may be related to some browsers that do not support sizes under 12px. Therefore, using rem units, the default font size of the html font must be set to 12px or more. If it is less than 12px, the browser automatically defaults the font to 12px when converting.

Write at the end

In the development, how do we choose the unit of length, it needs to be based on the specific needs of the actual development, for example, some projects like ours, just browse on the pc, do not need to browse on the mobile terminal, and do not need For responsive development, in fact, the entire page unit, using px, can meet the development needs; and some projects may require responsive development, depending on the specific situation, but no matter what, you put The basic properties and essence of the unit of length are understood, and how to choose is a very simple matter. Today's article hopes to give you some inspiration and hope to help those who do not know the basic knowledge.
0
0
0
0
0
0
0
0
Name
Verification Code
Can't see clearly, change another Already Comment information, click to view comments
Comments from users
Next: No information