第一種方法
(function(){
var html=document.documentElement;
var hWidth=html.getBoundingClientRect().width;//獲取到頁面的寬度
html.style.fontSize=hWidth/7.5+'px';//將頁面平分為7.5分份
console.log(html.style.fontSize)
})()
第二種方法(華為手機適配有問題)
let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
let htmlDom=document.getElementsByTagName('html')[0];//獲取html的dom
console.log(htmlWidth)
htmlDom.style.fontSize=htmlWidth/7.5+'px';//將頁面平分為7.5份
window.addEventListener('resize',(e)=>{
htmlDom.style.fontSize=htmlWidth/7.5+'px';
})
在以750px的設計稿中,相當于1rem=100px
為基礎壹粟,就可以按照實際設計稿的尺寸除以100得到代碼中對應的rem拜隧。例如設計稿中元素的font-size:30px
,在寫代碼的時候我們就直接換成font-size:.3rem
第三種方法
(function(){
$('html').css('font-size', ($('body').width() /750 * 62.5 + "%"));
})()
頁面設計稿750px趁仙,因移動端瀏覽器默認字號大小為16px;16*62.5%剛好為10px洪添;頁面中font-size:12px
;則設置font-size:1.2rem
;
rem:相對根節(jié)點html的font-size設置來作為當前元素1rem所代表的像素值,與em的區(qū)別就是rem的基本度量單位與父節(jié)點無關雀费,只與根節(jié)點font-size的設置有關干奢,如設置html{font-size:10px;}后當前dom所有節(jié)點的1rem都表示10px;
第四種
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth||window.screen.width;