rem做到pc端到移動端自適應
阿新 • • 發佈:2018-12-23
將下面自適應js程式碼放到head下面body上面
adaptive(document, window);//初始載入自適應 function adaptive(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if(!clientWidth) return; if(clientWidth >= 1920) { docEl.style.fontSize = '70px';//這個是根據我自己專案調的 } else { docEl.style.fontSize = 70 * (clientWidth / 1920) + 'px'; } }; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); } //隨瀏覽器大小自適應 window.onresize = function() { adaptive(document, window); }
因為要我的專案要留點白邊,所以根據我的html為70px,最外層父盒子我給了width: 25.4rem;剛剛留有白邊,這個父盒子不想留白邊可自行調整寬度。
最後要注意一點是絕對不能有px!,可以為rem單位和百分比。