rem
(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size
计算值的倍数。
方案一、固定换算倍数100设置rem,实现的效果是在PC端浏览器里不用点击toggle device toolbar(切换设备工具栏)也可以和移动端屏幕基本一致的效果体验,设置的默认宽度为750px(可以根据你的图纸修改默认宽度),在默认屏幕宽度下1rem等于100px。这样你写px单位的时候只需要除以100就可以直接换算成rem单位了!
function IsPC(){
var userAgentInfo = navigator.userAgent;var reg = new RegExp("(Android|iPhone|SymbianOS|Windows Phone|iPad|iPod)","ig");
var isPC = !reg.test(userAgentInfo);
return isPC
}
var initFontSize=function(){
var n=document.getElementsByTagName("html")[0],
e=document.documentElement.clientWidth;
if(IsPC()){
if(e>750){
n.style.fontSize = "100px"
}else{
n.style.fontSize = e/750*100+"px"
}
}else{
n.style.fontSize=e/750*100+"px";
}
};
initFontSize();
window.onresize=function(){
initFontSize()
};
方案二、将px替换成rem,动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化,从而达到各种屏幕基本一致的效果体验。举例说明,在320px宽度的屏幕下font-size的默认值是16px,得到的换算rem的倍数为320/16=20;1rem等于16px;
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';