Rem.js 適配不同解析度終端設定
阿新 • • 發佈:2018-12-23
程式碼一
window.onload = function(){ /*720代表設計師給的設計稿的寬度,你的設計稿是多少,就寫多少;100代表換算比例,這裡寫100是 為了以後好算,比如,你測量的一個寬度是100px,就可以寫為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);
上面兩種程式碼都可以實現適配不同解析度,展示效果
Ipone7下顯示效果
Ipad下顯示效果
引用rem.js檔案,在不同終端下都能夠等比例的縮放
作者:xinhui9056
連結:https://www.jianshu.com/p/b0aa8f0ed4ba
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。