About using REM units, CSS functions, calc () for adaptive layout

first, about the unit in CSS

We all know that the units in the CSS, generally include px,%,em and other units, in addition CSS3 a new unit of REM.

px,% and other units usually in the traditional layout of the use of more frequent, we are more familiar with, but PX units in the process of self-adaptive layout will be somewhat inadequate, most of the solution is to use the percentage of units with @media Media query for adaptive layout.

But there's another CSS3. Newly added units can also be used for adaptive layout, which in my opinion is more convenient and intuitive.

1, EM and REM

First introduce the EM, this unit is based on the font size of its parent element to calculate, that is, 1em is the font size of its parent element, for example, the parent element's font size is 12px, and its child element 1em is 12px,2em 24px. But because it can only be calculated for the parent element, it is inconvenient to use because it involves a large number of operations, so it is not used much at ordinary times.

CSS3 for this situation in the CSS3 of the specification introduced a new unit Rem,rem using the same way as EM, except that the EM is based on the font size of its parent element to calculate, and rem is the root element is the HTML tag font size for the calculation, In this case, if the font size of HTML is 12px, then the 1 rem of the left and right elements in the page is 12px,2rem 24px.

2. Adaptive layout with REM: Simple automatic adaptation of all screens

The key to using REM for adaptive layouts is to assign a dynamic font-size to HTML, where we can use JS to get the page width (or height) after the page Dom is loaded, and then divide it by a fixed amount, such as 20, The result is then assigned to the HTML font-size so that we get a value that will change depending on the width of the page, which is 1rem. The code is as follows:

 //  When the page size changes, get the new fo Nt-size value  $ (window). Resize (function () {sethtmlfontsize ( 20  );})  //  initialize execution sethtmlfontsize;  //  function sethtmlfontsize (num) { //  The width of the page, where 17 is the width of the default navigation bar for the page  var  _w=    Document.documentelement.clientwidth-17  ; $ (' HTML '). CSS (' fontSize ', _w /num); }

For example, we first use JS to get the width of the page, divided by 20 to calculate, assign this value to the HTML font-size, get a change based on the width of the page 1rem, this time if we get the width of the design is 640px, divide it by 20, So we get in the case of a page width of 640px 1rem is 32px, if the design of the banner part of the width is 320px, and the height is 160px, this part needs to be adaptive, then we can give the banner width of the map 320/32= 10rem, and the height is 160/32=5rem. After this assignment if the width of the page is 640px, the size of the banner is 320px160px, the width is half the screen size, height is 1/4, this time if the screen becomes 1280px, then this time the page 1rem represents the size of the 1280/20= The size of the 64px,banner becomes the corresponding 640px320px, and the width remains half the size of the screen, with a height of 1/4. This makes it very simple to implement an adaptive layout assignment.

With this dynamic setting of the value of the HTML font-size, we can easily set the size of any place on the page, such as Padding,width,height,margin, and this size is adaptive.

Ii. About Calc ()

In the self-adaptive layout sometimes encountered need to have a fixed width of the place, such as a div width of the screen size of half, but there are 10px padding, that in this case if we directly to the width of 50%, or after the calculation of REM units, and then to padding, Because the relationship of the box model causes its width to be 50%+20px. However, because 50% is an invariant value, it is difficult to calculate a specific value, in which case we can use a calculation method in CSS3: Calc (), you can set

div{    Width:calc (50%-   20px);}

The result of this setting is the result of the calculation, and any place that needs to be given a specific value can be computed using calc, although it is important to note that this method can only be used for the arithmetic of +-*/, and a space is required before and after the symbol is calculated. Of course, the above 50% can also be converted to the REM unit after calculation.

Note: The expression inside the Calc, when using the operation symbol, two times must add a space (although multiplication can be ignored, but it is recommended), otherwise it will parse the error.

Summarize:

The use of REM units and the Calc () method for adaptive layout is very powerful and can be used in conjunction with media queries to control the adaptation of various elements with great flexibility.

About using REM units, CSS functions, calc () for adaptive layout