記錄我的第一篇部落格

   學習前端有一段時間，看部落格一直是自己的學習習慣，今天我也來分享一下，從此以後，開始我的部落格之旅（廢話了幾句），下面進入正題：

移動端適配，對於我來說，一直是一個頭疼的問題；經過長期的掙扎，終於花了一整塊時間去研究了一下rem佈局；

我在網上看了很多關於rem的文章，大多都是介紹手淘團隊的flexible.js，相信大多數人都讀過大漠老師寫的這篇文章，請仔細閱讀文章；

flexible.js的原理

通過移動裝置的dpr（裝置畫素比：裝置畫素比 = 物理畫素 / 裝置獨立畫素 ；window.devicePixelRatio）和螢幕寬度（document.document.clientWidth）來動態的改變html的font-size的大小

手淘團隊flexibe github原始碼，中間有幾個地方不明白；也看了很多解釋得文章，也沒能很好的理解

1.上面的那一句註釋是不是寫錯了，ios下不是分2、3屏。他幹嘛註釋說用2倍方案？？？

2.如果是iPhone5.則其dpr為2，scale=0.5,則<meta name='viewport' initial-scale='0.5'>，如果是安卓手機則其dpr為1，相應的則其scale=1；

接著下面的html 的font-size的大小為:

var rem = width / 10;

docEl.style.fontSize = rem + 'px';;

為什麼除以10呢，，大漠老師的文章裡誰的是為了以後更好的相容vh和vw這兩個強大的新單位，

現在寫樣式的時候只需把設計圖上的尺寸/75(iphone6的設計圖)，單位為rem即可，

即1rem等於螢幕寬度的十分之一。

現在設計圖的px轉換為rem可以通過sublime3的外掛，或用less函式（我至今不會用），

但我覺得，讓 var rem = width/750 *100(iphonr6設計圖)，

這樣寫的1rem就等於你在設計圖上測量的尺寸除以100即可3.

確實是這樣，應用了flexible移動端佈局簡單多了，可以像寫pc端那樣愉快的玩耍了

4、我現在一直搞不明白dpr是用來做什麼的，

網上有很多文章說主要解決了border: 1px問題，圖片高清問題，

我寫的程式碼不多沒有遇到這兩個問題，，所以沒有切身的體會，

那個retina高清屏顯示的問題我也搞的一知半解的，

佈局中，字型不適用於rem單位，可以由dpr的不同設定不同字型，

flexible對字型的處理方案 我覺得，flexible裡面dpr是不是隻是用來解決高清屏顯示，border：1px問題，

原始碼我也是看的不太懂，

另外說一說dpr存在的問題，看到另一篇部落格點選開啟連結，

說小米4，檢測是會彈出iphone，還有應用了dpr之後媒體查詢可能問題，

（就是媒體查詢的寬度會和裝置的寬度*dpr，相等），

即在rem佈局時，慎用媒體查詢/ 預設寫上dpr為1的

fontSize

[data-dpr="2"] 

div { font-size: 24px;}

[data-dpr="3"]

div { font-size: 36px;}

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;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
</span>

可能是我沒有深入的理解dpr這個問題，

我現在就覺得，我就可以只根據螢幕寬度，來動態改變html font-size大小，不去考慮，dpr的問題，

現在我這樣寫也沒出現什麼問題，顯示效果也還行，真的有必要使用dpr嗎？？？

我看到了這篇文章想法和我一樣點選開啟連結，真的有必要嗎？

現在我是這樣做的，寫一段這樣的js，僅僅只靠，螢幕寬度來改變html font-size大小，

我是按phone6設計圖來的，只需在設計圖上量取尺寸，除以100 ，寫在css樣式裡，單位為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>=750){
                    docEl.style.fontSize = '100px';
                }else{
                     alert(clientWidth);
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

通過，zoom屬性根據不同螢幕尺寸，按照不同比例進行縮放，也能達到移動端適配效果，

但zoom這個屬性，的支援程度實在太差，寫的是時候字型縮放出現了問題，

安卓字型縮放正常，ios無法縮放，最後通過 -webkit-text-adjust：auto；雖然勉強達到了效果，應付了那次專案上線，最後心裡還是挺害怕的

第一次寫部落格，寫完之後，才發現文章是那麼難寫，感覺從頭到尾寫的驢脣不對馬嘴，太難受，估計也不會有人看了，，，謹以此移動端適配來紀念我的第一篇部落格，，以後我會慢慢完善它的