Achieve mobile screen adaptation by rem and js

rem Unit Introduction: relative root element (html) is a unit of length, 1rem = 16px.

-size font : calculating multiple values

Adaptation principle: the original substituted with rem px, dynamic modification of the font-size adaptation html.

for example:

　　We can put CSS in rem px units into units for testing. Html root element because the font size is 16px, then replaced rem units, like direct divided by 16

<div class="divSize">
    <p>文字大小</p>
</div>

.divSize{
  width:20rem;/*iphone5:320px*/  
  height:10rem;
  background:pink;    
}
.divSize p{
  font-size:2rem;  
}

By JS control screen adaptation:

<Script>
     // get the phone screen width of 
    the let htmlWidth document.documentElement.clientWidth = ||      document.body.clientWidth;
     // get Dom html elements of 
    the let htmlDom = document.getElementsByTagName ( 'html') [0 ];
     // root size of the element is provided 
    htmlDom.style.fontSize htmlWidth = / + 20 is 'PX'; 
</ Script>

So, we set the root element by js the font size to achieve a variety of effects has been the basic screen experience.