CSS size and font units-em, px or%

In the overall layout of the page, the size of the page elements (length, width, padding, and so on) and page font sizes is also one of the important tasks. A reasonable setting, it will make the page look hierarchical, focus on bright, pleasing. Conversely, an unfriendly page size and font size setting will increase the complexity of the page and increase the user's understanding of the page, even in the current access to the terminal (IPhone, IPad, PC, Android ... In an endless stream of today, to adapt to a variety of access terminals, will become the hands of a "hot potato." So in recent years, "nine Gongge" style "flow Layout" return again. To provide page layout, and its maintainability, extensibility, we try to set the size of the page element and the font size to relative values, no longer an orphaned fixed pixel point. So that it can change the size of the parent element, the child element can also adapt to the change. And with a small number of the latest CSS3 @media query, to achieve "responsive layout", bootstrap such CSS framework trend rise.

In CSS, however, the document sizes are divided into two categories: relative length units and absolute length units. However, relative length units according to different reference elements, but also can be divided into font relative units and Windows relative units. The relative units of the font are: Em, ex, CH, rem; the window relative units contain: VW, VH, Vmin, Vmax several. Absolute positioning is fixed dimensions, which are in physical units of measure: cm, MM, in, PX, PT, and PC. In practical applications, however, we use the widest range of EM, REM, PX, and percent (%) to measure the size of page elements.

1. PX: is the pixel unit. It is the smallest unit displayed on every dot displayed on the display. It is an absolute size unit;
2. EM: It is a description of the font size relative to the current element applied, so it is also a relative length unit. General browser font size defaults to 16px, then 2em = = 32px;
3. %: percent, it is a more purely relative length unit. It describes the percentage value relative to the parent element. such as 50%, is half of the parent element.

It is important to note that EM is relative to the font size applied to the current element, while the percentage is relative to the size of the parent element. As in the following example:

Html:

<div class="parent">      <div class="em-demo">       设置长度为5em demo      </div>       <div class="percentage-demo">       设置长度为80% demo      

Css:

div{     border: 1px dashed #808080;     margin:10px }  .parent{     width: 200px;     font-size: 18px; }  .em-demo{     width: 5em; }  .percentage-demo{     

Then it is (http://jsbin.com/xihusojale/edit?html,css,output):

As we can see from the diagram, the first line of the 5em Div is exactly 5 characters in size because, as stated above, it is relative to the current element font size, 5 * = 90px. The percentage display is larger because it is relative to the parent element's size ratio, and 80% = 160px.

You can set the size and font size of the elements for PX, EM, and percentages, but they each have their own different scenarios. Unreasonable use, it will lead to the confusion of the page, difficult to maintain and expand. The following are some of the best practices that are recognized for their use:

1. Use relative dimension units as far as possible

With relative dimension units metering, you do not need to traverse all of the internal dom structures to resize the inner child elements while adjusting the layout of the page, and it is also better adapted to the multi-medium resolution and screen terminals. Using relative positioning does not mean that the whole page is self-adapting.

Of course, for the overall site of the "responsive design" to adapt to today's endless variety of access terminals, relative size layout will play a greater value. We only need to use CSS3 's @media query to set the overall width of the perimeter, and a small number of user experiences that are inconsistent on the device. With regard to "responsive layout", you can refer to the new CSS framework such as Bootstrap.

Settings for relative dimension units: Em and% because they are relatively different references, they also have different usage scenarios. If you want to change the size of the current element's font size, use EM best, such as: row height, font size. Conversely, if you change the dimensions with the parent container or the overall page layout, use% better, such as the height and width settings of the element.

2. Use absolute dimensions only on predictable elements

Not all element settings relative to size are optimal. For predictable dimensions such as table icons, multimedia elements such as video, and the width of the overall web page, setting the absolute path may be the best choice. But they need to try specific scenarios to get the best experience. No matter how we set the relative size, there are always some absolute dimensions in the outer layer, and there is a possibility of a relative size setting such as percentages.

3. Font size use EM, rem as much as possible

And as far as possible to use relative size units, for the maintainability and scalability of font size, it is recommended to use EM as font size units. It is important to note that if there are 3-layer and 3-layer font-relative-size settings, the calculation of the actual font size becomes relatively cumbersome. This time, in the context of satisfying browser compatibility, consider using the new features of CSS3 REM: Set relative size based on the font size of the fixed root element, which is how mobile apps have been used in recent years.

REM compatibility can be obtained using the can I use website.

4. @media query to do platform adaptation, but prohibit anywhere abuse

As mentioned above, CSS3 's @media query can help us achieve the adaptive layout of multi-platform terminal and get a better user experience. But this does not mean that we can abuse it everywhere, there are too many platform differences in the CSS code, which also increases the readability of the code, maintainability of the difficulty. A better way is to use it only if it is necessary, such as the overall width of the periphery of the page, the menu bar of different display, etc. More experience adaptability, can be moved to use "streaming layout" to achieve.

With regard to responsive design, this is the result of a trade-off between development cycles, costs, and the platform experience. If the cost of development and maintenance is not taken into account, different page designs will be provided for different platform terminals, thus resulting in a more user-friendly experience. But in real development, development and maintenance costs, product lifecycles are also an important trade-off, and responsive design is the tradeoff between them.

CSS size and font units-em, px or%