Self-adaptation of REM

With regard to the adaptive size of the font, the most recent use of the very fire is rem. Since the realization of REM, I also use very vigorously, but in the project practice, also stepped on some pits, finishing as follows, finally found that there is a relatively perfect solution.

1. What is REM?
REM is a unit of length that can be defined as Xxrem in any place that defines XXPX. Unlike the PX fixed size, REM is relative to the root element

PS: See, the text size inside the p tag is relative to the root element html rather than its parent div.

2. REM Response Scheme 1: Automatically change the value of the root element HTML font size by JS detection screen size
Since all the tags are relative to the HTML, it can be detected by JS screen size and automatically change the value of the root element HTML font size, so that does not implement the font size of the response type ~ ~

JS as follows:

(function (Doc, win) {//automatically adjust root element font size based on screen sizevarDocel = Doc.documentelement,resizeevt ='Orientationchange' inchWindow?'Orientationchange':'Resize',//Monitor Screen changesRecalc =function () {varClientWidth =Docel.clientwidth; if(!clientwidth) {return;} DocEl.style.fontSize=Ten* (ClientWidth/ the) +'px';//320 wide, 10px as a benchmark        }; if(!doc.addeventlistener) {return;} Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener ('domcontentloaded', Recalc,false);}) (document, window);

This JS key statement is: ' DocEl.style.fontSize = ten * (clientwidth/320) + ' px ', wherein ClientWidth is 320px,iphone6 under IPhone5 or 5S is 375px, iphone6p is 414px and so on ... In the pre-project, I have been this JS control, but found that the wood has, the page width is getting bigger, the root element will be more and more large, wood has the upper limit, when more than a certain threshold, the page will be more and more difficult to see, show as follows:

In fact, to this, almost compatible with the size of the mobile phone screen, but the screen at large points (such as a variety of pad screen) is not so good-looking ... Go on

So, is there a better solution for wood? That must have been ...

2, REM response scheme 2: Through CSS3 Media query, in a certain screen size range, set a value for the root element.

The CSS is as follows:

@media only screen and (max-width:375px) {Html{font-size:10px;}/*Mobile phone small screen*/} @media only screen and (min-WIDTH:376PX) and (max-width:480px) {Html{font-size:12px;}/*in-phone screen*/} @media only screen and (min-width:481px) and (max-width:540px) {Html{font-size:14px;}/*mobile phone big screen*/} @media only screen and (min-width:541px) and (max-width:768px) {Html{font-size:16px;}/*mobile phone big screen*/} @media only screen and (min-WIDTH:769PX) and (max-width:920px) {Html{font-size:18px;}/*Pad Screen*/} @media only screen and (min-width:921px) {Html{font-size:20px;}/*PC Screen*/}

PS: The above CSS for various screen size range and the corresponding font size, according to the project's own preferences and the actual project self-editing settings.

3. Summarize

Both of the above scenarios are based on the size of the screen to set the root element font size value, each has a disadvantage:

JS Dynamic Settings Disadvantages

• Need additional load parsing, sometimes load slowly, will be on the page when the word experience is very large, typesetting confusion, and then loaded, all of a sudden ... cause bad user perception;

• There is no upper limit to the font, which can cause a growing dilemma (of course, it could also be written under a more complex equation, but based on its 1th disadvantage, I have abandoned him)

CSS Media query Settings disadvantages:

As the screen shrinks or pulls large, in the screen size threshold, will suddenly appear the phenomenon of stalling, but considering the actual use of the user process, not so boring to deliberately pull the screen, especially in the mobile phone, users can not arbitrarily change the size of the screen, all this small drawback completely negligible. So, so, the individual still think, this plan is best!

Self-adaptation of REM