About using REM units, calc () for adaptive layout

About units 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.

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 HTML font size is 12px, then the 1 rem of the left and right elements in the page is 12px,2rem 24px.

Adaptive layout with REM--------Simple auto-fit 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:

//页面大小出现变化的时候再次获取新的font-size值 $(window).resize(function(){
setHtmlFontSize(20);
}) //初始化执行setHtmlFontSize(20);
//动态设置html元素的font-size的方法 function setHtmlFontSize(num){//页面的宽度，其中17为页面默认的导航条的宽度 var _w=document.documentElement.clientWidth-17;
$(‘html‘).css(‘fontSize‘,_w/num); }

Cases

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 is wider to 1280px, then this time the page 1rem represents the size of 1280/ The size of the 20=64px,banner becomes the corresponding 640px320px, the width is still half the screen size, the height is 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.

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, which makes it 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, but it is necessary that this method only arithmetic the +-*/, and that 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.

Through these in the method in the adaptive layout of the time can be more handy ~ ~

Conclusion

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.

<! DOCTYPE html>
　　
About using REM units, calc () for adaptive layout