關於app端rem適應不同手機螢幕計算方法
阿新 • • 發佈:2018-12-19
rem是相對根元素html,app端預設的html大小一般都是16px,也就是說1rem = 16px;然後用px和rem的比例計算出rem的值即可。
現在一般設計稿都是做750尺寸的,所以我用750尺寸作為參考點,計算其他尺寸的手機,程式碼如下:
;(function(win){ function setFontSize(){ var html = win.document.documentElement, //獲取當前頁面html元素 html_w = html.clientWidth,//獲取當前頁面寬度 get_w = html_w / (設計稿的大小,750就*2,375就直接375;看個人喜歡設定多大);// html.rem = get_w;//這裡不用管,全域性加一個rem的欄位方便以後要用 html.style.fontSize = get_w + 'rem';//設定頁面是是多少rem } window.addEventListener('resize',function(){//瀏覽器視窗改變時,重置html字型大小 setTimeout(setFontSize,400) }) setFontSize() }(window))
如果設計稿看不到rem折算,編輯器可以自動換算,不過要配置。比如
編輯器用的是hbuilder,直接編輯器設定換算比例為2被即可,如圖:
這樣就可以適應所有大小不同的手機了