rem.js

//rem是移动端常用的尺寸单位，rem通过控制html的font-size的大小为标准，对页面单位进行调整，
//rem布局方式就是，通过监听浏览器窗口大小的改变，从而改变页面单位，使其达到适配所有屏幕的效果

///////////////////////////////////////下面是 rem布局的代码片段///////////////////////////////////////////
//这个不推荐使用（虽然也可以解决问题但是容易引起错误）简单项目可使用
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    
})(document, window);

/*********************************************************************/
/** rem中的坑（推荐使用-->本人项目中常用）
 * 1.在webview中嵌套h5网页的时候使用rem布局，当页面初次加载的时候出现页面混乱问题解决方法
 */
 (function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
            var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            //检测是否为横竖屏
            var width = w > h ? h : w;
            width = width > 640 ? 640 : width
            var fz = 100 * (width / 640)
            document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz +"px";
            //再次获取html的font-size大小
            var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
            //判断设置的和获取的是不是相同（不相同的话重新设置）
            if (fz !== realfz) {
                document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
            }
        };
    if (!doc.addEventListener) return;
    //当窗口发生变化的时候调用
    window.addEventListener('resize', recalc, false);
    //在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
    window.addEventListener('orientationchange', recalc, false);
    //当初始HTML文档被完全加载和解析完成之后触发事件，而无需等待样式表、图像和子框架完成加载。
    document.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

/**
 *rem布局字体不用rem值是因为在Retina屏幕下会变的很大,而这时候我们更希望在大屏幕上显示更多的内容,
 *在淘宝中是用了dpr是判断
 */
//js实现的dpr判断：
if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下，仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}
document.documentElement.setAttribute('data-dpr', dpr);

//css样式中的使用
div {
    width: 1rem;
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}

/**
 * 3.页面首次加载出现页面混乱问题解决方法
 */

/**
 * 1.JS加载顺序与加载方法 
 * 页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，
 * 我们就应该将html的font-size计算好。
 * 于是乎，我们应当把计算字体的js放在body之前，如下所示：推荐——原生写法(优化加载，加快body的显示)： 
 */

// jQ写法（不利于加载，不过jquery.min.js体积也不算太大）： 

/**
 * 2.小技巧——对body进行CSS处理 
 * 如果不像1一样，让js方法在页面加载到body之前就运行，又能保证加载完成前页面不错乱应该怎么做呢！ 
 * 这里运用小技巧，利用css以及js的计时器等进行处理，先让body隐藏，在计算好html的font-size后再令其显示。
 * 其实按道理来说，这样的处理方式有点粗暴，但是也不是不可采用，方法如下：
 *   1.给html中的body添加行内样式 style=”display:none”, 先设置隐藏； 
 *   2.计算js的方法在body之后添加，做到先加载网页文档；
 */


/**
* 1毫秒的时间我们可以忽略不计但是，这样的方法是有缺点的（至于存在多少问题，问题的大小，只能是一步步被发现）：
* body设置隐藏之后，body元素从页面中被移除，而之后的js在遍历一些元素等偶尔会出现一些问题，比如使用过swiper框架的朋友可以试下，
* 在初始化swiper之前设置以上方法试试~！你会发现，swiper无法使用了惊恐，无妨，后续介绍其解决方法！
*/

/**
* 3.优化上面的小技巧——对body进行CSS处理 
* 上述方法使用的display:none会有一定的问题，所以，大家不妨使用到display的表兄弟——visibility属性,方法与2 
* 几乎一样，如下： 
* 1. 给html中的body添加行内样式 style=”visibility:hidden”,(就是替换display:none，其他不变) 先设置隐藏；
* 计算js的方法在body之后添加，做到先加载网页文档；
* 在计算font-size的js方法之后添加showPage 的js (就是替换display:none，其他不变)。
* visibility属性只是将元素隐藏，保留了其原本的位置，相当于它依然存在在页面上，只是隐身了~~~~！！！！！！！相比较2，风险就小多了~!
*/

------------------------------------------------------------------------------------
/**
* 前端适应布局扩展
* 可以使用vw（等于视口宽度）
* 也可以使用640布局（但是需要设计出640稿）
* 640布局只需要在head标签中写入（css都用Px处理即可）
* 
*移动端开发法神器可以使用console.log的，下载链接：http://pan.baidu.com/s/1eSKmop0 密码：q1e6
*/