這是我之前一直使用的第一種rem方案。貼代碼

<script>
    // 適用于750的設計稿
    var iScale = 1;
    // 通過頁面加載的時候去獲取用戶設備的物理像素比
    iScale = iScale / window.devicePixelRatio;
    // 然后來設置html的<meta>表現的縮放屬性，從而達到在任意頁面實現頁面布局的自適應的效果
        document.write('<meta name="viewport" content="width=device-width,' +
            'initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + ',user-scalable=no" />')
    // 獲取瀏覽器窗口文檔顯示區域的寬度，不包括滾動條。
        var iWidth = document.documentElement.clientWidth;
    // 設置頁面基礎的字體大小
        document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
</script>

這段代碼的意思就是，通過頁面加載的時候去獲取用戶設備的物理像素比，然后來設置html的<meta>表現的縮放屬性，從而達到在任意頁面實現頁面布局的自適應的效果，下面的設置頁面基本字體的我設置的除以15，在iPhone6上面的font-size = 50px；也就是1rem = 50px；別問我為什么這么設置，全是因為個人習慣。
關于設備的物理像素比，如果有不懂的同學，我推薦大家去研讀一下張鑫旭老師寫的一篇文檔，關于設備物理像素比的，里面說的很詳細，下面是物理像素比的介紹

下面說一下我在使用第一種方案遇到的問題。

在我平時在任何的手機瀏覽器的頁面中，不管是pc端的瀏覽器，還是手機自帶的瀏覽器，都是可以自適應的縮放頁面，達到的效果也是理想的。這個就不跟demo了。
后來我再工作中一直也是這么用的，在一次和app開發的小伙伴合作的時候，因為頁面是內嵌在app里面，app開發的時候，會默認的對瀏覽器的使用會做一些默認的設置，就比如下面的這一條屬性：WebSettings.setUseWideViewPort(true);//設置此屬性，可任意比例縮放,一般的安卓的app的開發者都會默認禁止這條屬性；說是會對其他的東西有影響。那么這樣的話，就不能夠實現任意比例的縮放了，也當然達不到我們想要的結果。

后來我又找到我現在使用的第二種rem方案。貼代碼

    <script>
        var docEl = document.documentElement,
            //當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時，
            //注意現在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。
            //總來的來就是監聽當前窗口的變化，一旦有變化就需要重新設置根字體的值
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                //設置根字體大小1:50適用于375的設計稿，需要變更，就更改基礎字體的數值
                docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + 'px';
            };

        //綁定瀏覽器縮放與加載時間
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    </script>

第二個方案相比第一個方案來說有兩個有點。

更加的方便，因為監聽了當前窗口的變化而執行js代碼，更加的便捷。
不用依賴標簽<meta>的縮放大小的屬性，可以直接寫為<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">這樣就可以了。這樣就避免了在app中安卓禁止頁面任意比例縮放后，頁面不能自適應的這個bug。

給大家上一個小的demo希望給大家一些直觀的感受，不要問為什么不給鏈接！

<!DOCTYPE html>
<html>

<head>
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
    <title>我姓李名乾坤</title>
    <script type="text/javascript">
        var docEl = document.documentElement,
            //當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時，
            //注意現在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。
            //總來的來就是監聽當前窗口的變化，一旦有變化就需要重新設置根字體的值
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                //設置根字體大小
                docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + 'px';
            };

        //綁定瀏覽器縮放與加載時間
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
            background: white;
            margin-top: .01rem;
        }

        html,
        body {
            font-family: "微軟雅黑";
            width: 100%;
            height: 100%;
            background: #E9E9E9;
        }

        .left {
            float: left;
        }

        .loan {
            width: 7.2rem;
        }

        .loan>li {
            width: 7.5rem;
            height: 1.99rem;
            border-bottom: 1px solid #E9E9E9;
        }

        .logoBox {
            width: 1.45rem;
            height: 1.57rem;
            padding-left: .3rem;
            padding-top: .4rem;
        }

        .logoBox>img {
            width: 1.17rem;
            height: 1.17rem;
        }

        .contentBox {
            width: 4.5rem;
            height: 1.17rem;
            padding-top: .4rem;
        }

        .Name {
            width: 4.5rem;
            height: .5rem;
            line-height: .5rem;
            font-size: .3rem;
            color: #333333;
        }

        .description {
            width: 4.5rem;
            height: .22rem;
            line-height: .22rem;
            font-size: .22rem;
            color: #666666;
            margin-bottom: .1rem;
        }

        .contentBox>span {
            padding: .05rem .06rem;
            font-size: .14rem;
            line-height: .14rem;
            color: #fc936d;
            background: #fff4f0;
            margin-right: .05rem;
        }

        .optBtn {
            width: 1.1rem;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
            background: #FFFFFF;
            font-size: .22rem;
            color: #fc936d;
            margin-top: 1rem;
            border-radius: .1rem;
        }
    </style>
</head>

<body>
    <ul class="loan">
        <li id="paipaidai">
            <div class="logoBox left">
                ![](1.png)
            </div>
            <div class="contentBox left">
                <p class="Name">貼代碼</p>
                <p class="description">貼代碼，貼代碼</p>
                <span class="left">貼代碼</span>
                <span class="left">貼代碼</span>
                <span class="left">貼代碼</span>
            </div>
            <div class="optBtn left">喜歡代碼</div>
        </li>
        <li id="paipaidai">
            <div class="logoBox left">
                ![](1.png)
            </div>
            <div class="contentBox left">
                <p class="Name">貼代碼</p>
                <p class="description">貼代碼，貼代碼</p>
                <span class="left">貼代碼</span>
                <span class="left">貼代碼</span>
                <span class="left">貼代碼</span>
            </div>
            <div class="optBtn left">喜歡代碼</div>
        </li>
        <li id="paipaidai">
            <div class="logoBox left">
                ![](1.png)
            </div>
            <div class="contentBox left">
                <p class="Name">貼代碼</p>
                <p class="description">貼代碼，貼代碼</p>
                <span class="left">貼代碼</span>
                <span class="left">貼代碼</span>
                <span class="left">貼代碼</span>
            </div>
            <div class="optBtn left">喜歡代碼</div>
        </li>
    </ul>
</body>

</html>

其實第二個方案來說還有一個缺點，第一個方案也同樣具有：就是當app的開發者禁止調用我們前端開發的界面使用js的時候，那我們的rem方案就有不能自適應了，因為我們知道我們是設置了頁面的基礎字體的大小來達到自適應的目的，那么瀏覽器默認的rem和px的比例應該是1:16的比例。當靜止js的時候，頁面就還原成為原始的比例，而我們設置的一般,為了更好的計算都是1:50或者是1:100，那這樣頁面就會整體的顯得縮小了很多，但是頁面布局還是沒有亂的。（那么有同學問了，既然我們知道問題所在了，那為什么不把頁面基礎字體的大小設置成和默認的差不多然后不就無敵了？那下面就有了第三種的方案）

這是第三種rem方案。貼代碼

window.onload=function(){var e=(document.documentElement.clientWidth>=640?640:document.documentElement.clientWidth)/320*12;document.documentElement.clientHeight;document.getElementsByTagName("html")[0].style.fontSize=e+"px"};

這種方案的的好處是它的rem和px比值在瀏覽器模擬機器上面的比值是1:12，其數值大小也同樣是可以調整的，這樣的做的好處就是，在安卓原生的app上面，即使app的開發者禁止了js的使用，也可以做到一個相對的自適應，效果要比前面的兩個要好一點，但是缺點就是px和rem之間的換算有點麻煩。

總結

不知道上面的分享有沒有幫助到你，你要是問我有沒有推薦的，我已經把適用的場景說的很明白了。你可以自己選擇，我現在一般是用的第二種的。
希望能幫助到你們~如果有什么問題，請大家多多指出。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

rem在手機移動端app中的兼容適配問題。

rem在手機移動端app中的兼容適配問題。

這是我之前一直使用的第一種rem方案。貼代碼

下面說一下我在使用第一種方案遇到的問題。

后來我又找到我現在使用的第二種rem方案。貼代碼

這是第三種rem方案。貼代碼

總結

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

rem在手機移動端app中的兼容適配問題。

這是我之前一直使用的第一種rem方案。貼代碼

下面說一下我在使用第一種方案遇到的問題。

后來我又找到我現在使用的第二種rem方案。貼代碼

這是第三種rem方案。貼代碼

總結

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频