Android、Ios手機端字體根據屏幕分辨率自適應的方法,使用rem和px的區別

使用rem計算字體時,添加下列js文件,並根據750寬度的設計稿計算字體換算,用下述方法,表明750寬度下,1rem=50px; 根據這個倍率進行設置字體大小。css

例如:設計稿750寬度,設計稿字體爲30px,那麼在開發的時候,字體設置爲30/50*1=0.6rem。html

;(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem,rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width;   //瀏覽器寬度
        if (!maxWidth) { maxWidth = 640; }; if (width > maxWidth) { width = maxWidth; } //與淘寶作法不一樣,直接採用簡單的rem換算方法1rem=100px
        var rem = width * 100 / designWidth; //兼容UC開始
        rootStyle="html{font-size:"+rem+'px !important}'; rootItem = document.getElementById('rootsize') || document.createElement("style"); if(!document.getElementById('rootsize')){ document.getElementsByTagName("head")[0].appendChild(rootItem); rootItem.id='rootsize'; } if(rootItem.styleSheet){ rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle) }else{ try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle} } //兼容UC結束
        docEl.style.fontSize = rem + "px"; }; refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止執行兩次
        tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 瀏覽器後退的時候從新計算
 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); } })(750, 750);
相關文章
相關標籤/搜索