rem自適應佈局

心繫少時言 等一不歸人

監聽瀏覽器，針對不同解析度計算font-size

//方法一
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            /*720為設計稿大小*/
            docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);  })(document, window);

//方法二
var bli = 100 / 750;
var FontSize = function(){
    if($(window).width() <= 750){
        $('html').css({
            'font-size': $(window).width() * bli
        });
    }else{
        $('html').css({
            'font-size': '100px'
        });
    }
};
FontSize();
$(window).resize(function(){
    FontSize();
});

只需在js中新增如上一段程式碼，然後結果就是 100px = 1rem; 之後就可以使用rem實現自適應佈局。

注意要在HTML頁面頂部新增如下 meta 標籤：

<meta charset="UTF-8">
<!-- 根據瀏覽器的螢幕大小自適應的展現合適的效果 -->
<meta name="applicable-device" content="pc,mobile" />
<!-- 移動端 瀏覽器中頁面將以原始大小顯示，不允許縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />
<!--自動選擇更好的瀏覽器-->
<meta name="renderer" content="webkit">