在使用rem适配移动端时，如何改变根元素的字体大小？

rem和em相对单位长度我们经常用在响应式开发中，rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。

一般我们会使用js去控制根元素的font-size大小，然后进行rem换算：

function intiSize(){
    //获取当前浏览器窗口宽度(这里的实质就是body宽度)
    var win_w=document.body.offsetWidth;
    //定义变量
    var fontSize;
    if(win_w>640){
        fontSize=24;
    }else{
        //如果浏览器窗口宽度(这里的实质就是body宽度)值小于320，取320
        win_w=Math.max(320,win_w);
        fontSize=win_w/320*12
    }
    //设置根元素的大小
    document.getElementsByTagName('html')[0].style.fontSize=fontSize+'px';
}
//浏览器窗口宽度发生变化时条用这个函数，方便与改变窗口大小时候调试
onresize=intiSize;
intiSize();

问题：纯js控制会一个页面加载时候，知道加载完毕会出现由大变小的问题，这个是因为先加载页面然后再加载js，当没加载完这段js，函数没被调用，会出现很大字体或者图片很大，等JS加载完毕后，瞬间变回正常，这样会影响用户体验，这里有两个解决方法

解决办法：一、像淘宝移动端那样，页面没加载完毕前显示一个loading页面，加载完毕后再显示内容。

                 二、把加入一个css媒体查询样式表，页面先加载样式再加载内容，用css样式表去控制你的页面布局和js精确控制的布局偏差尽量降低到最小，这样加载完时候因为微小偏差的还原到精确的布局，这时候发生的变化非常微小（只有一个px左右的偏差）肉眼很难以看出（亲测实用），下面我贴出平时实用的css样式表，两张混合实用，移动端布局的问题得以完美的解决。