For the use of rem units, calc () for Adaptive Layout

For the use of rem units, calc () for Adaptive Layout
Unit in css

We all know that units in css generally include px, %, em, and other units. In addition, css3 adds a new unit rem.

Px, %, and other units are frequently used in traditional la S, and you are familiar with them. However, px units are insufficient in the adaptive la S, most solutions use % in combination with @ media queries for Adaptive Layout. However, another newly added unit in css3 can also be used for Adaptive Layout. In my opinion, this method is more convenient and intuitive.

Em and rem

First, we will introduce em. This unit is calculated based on the font size of its parent element, that is, 1em is the font size of its parent element, for example, if the font size of the parent element is 12 PX, 1em of its child element is 12 PX, and 2em is 24px. However, because it can only calculate the parent element, it is inconvenient to use because it involves a large number of operations, so it is usually not used much.

Css3 introduces a new unit rem under the css3 specification. The rem usage is similar to em, but em is calculated based on the font size of its parent element, rem calculates the font size of the root element, that is, the HTML Tag, in this case, if the html font size is 12 PX, one rem of the left and right elements in the page is 12 PX, and 2rem is 24px.

Adaptive Layout with rem -------- simple automatic adaptation to all screens

The key to Using rem for Adaptive Layout is to assign a dynamic font-size to html. here we can use js to get the page width (the height is also acceptable) after page dom loading ), divide it by a fixed amount, such as 20, and then assign the result to the font-size of html, in this way, we get a value that will change constantly according to the page width. This value is 1rem. The Code is as follows:

// Obtain the new font-size value again when the page size changes $ (window ). resize (function () {setHtmlFontSize (20) ;}) // initialize and execute setHtmlFontSize (20); // function setHtmlFontSize (num) to dynamically set the font-size of html elements) {// page width, where 17 is the default width of the page navigation bar var _ww.document.doc umentElement. clientWidth-17; (('html'{.css ('fontsize', _ w/num );}

Example

For example, we first use js to obtain the page width, divide it by 20, and then assign this value to the font-size of html, get a unit of 1rem that varies according to the page width. In this case, if the width of the design draft we get is 640px, divide it by 20, in this way, we can see that 1rem is 32px when the page width is 640px. If the banner part of the design draft has a width of 320px while the height is 160px, this part needs to be adaptive, then we can give this banner a graph with a width of 320/32 = 10rem and a height of 160/32 = 5rem. In this case, if the page width is 640px, the banner size is 320px.160px: the width is half of the screen size, and the height is 1/4. If the screen width is 1280/20 PX, The Size represented by 1rem on the page is = 64px, the banner size is changed to the corresponding 640px1/4 PX, the width is still half of the screen size, and the height is. This makes it very simple to implement Adaptive Layout assignment.

After dynamically setting the font-size value of html, we can easily set the size of any place on the page, such as padding, width, height, and margin, and the size is adaptive.

About calc ()

During Adaptive Layout, sometimes a place with fixed width and height is required. For example, a div with a width of half of the screen size has a 10px padding, in this case, if we directly give the width of 50%, or calculate the rem unit after calculation, and then give the padding ,. the box model is 50% + 20px in width. However, because 50% is an unfixed value, it is difficult to calculate a specific value. In this case, we can use a calculation method in css3, calc (), configurable

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

In this way, the calculated result is obtained. calc can be used to calculate any specific value, however, it is necessary that currently this method can only perform four arithmetic operations of +-*/, and there must be a space before and after the calculated symbol. Of course, the above 50% can also be replaced with the calculated rem unit.

Through these methods, you can be more comfortable with Adaptive Layout ~~

Conclusion

The rem unit and calc () method are very powerful in Adaptive Layout. They can be used with media queries to flexibly control the adaptability of various elements.