Rem.js 適配不同分辨率終端設(shè)置

代碼一
window.onload = function(){
    /*720代表設(shè)計(jì)師給的設(shè)計(jì)稿的寬度,你的設(shè)計(jì)稿是多少,就寫(xiě)多少;100代表?yè)Q算比例,這里寫(xiě)100是
      為了以后好算,比如,你測(cè)量的一個(gè)寬度是100px,就可以寫(xiě)為1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}
代碼二
!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

上面兩種代碼都可以實(shí)現(xiàn)適配不同分辨率,展示效果


Ipone7下顯示效果

Ipad下顯示效果

引用rem.js文件,在不同終端下都能夠等比例的縮放

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 對(duì)于熟悉pc端的小伙伴來(lái)說(shuō),對(duì)于靜態(tài)頁(yè)面的布局,一般都是沒(méi)有什么問(wèn)題的,為了保持各瀏覽器顯示的一致性,無(wú)論是...
    itclanCoder閱讀 13,852評(píng)論 5 61
  • title: 移動(dòng)端Web頁(yè)面適配淺析date: 2018-01-31 16:38:01tags: 移動(dòng)端 適配 ...
    豆板兒閱讀 12,477評(píng)論 0 16
  • 剛開(kāi)始做移動(dòng)端web開(kāi)發(fā)的同學(xué)應(yīng)該都碰到過(guò)頁(yè)面適配問(wèn)題,為什么我在開(kāi)發(fā)手機(jī)上調(diào)試好的頁(yè)面在其他手機(jī)會(huì)有這樣或那樣的...
    留七七閱讀 19,757評(píng)論 5 80
  • 全分辨率適配是移動(dòng)開(kāi)發(fā)的一個(gè)永恒的話題,因?yàn)楹芏嚅_(kāi)發(fā)者只能做到“打折扣”的全適配,也就是用手頭上的幾個(gè)手機(jī)測(cè)試過(guò),...
    microkof閱讀 5,965評(píng)論 0 7
  • 懊悔是人類常用的自我折磨方式,我也經(jīng)常陷入“早知道就...”的死循環(huán)中,久久不能自拔。大家都知道這些后悔是沒(méi)有用的...
    愛(ài)島飯閱讀 307評(píng)論 0 1

友情鏈接更多精彩內(nèi)容