rem字体设置是根据font-size相对设置:
<script type="text/javascript">
function rems(){
// 获取屏幕宽度(此处是一个兼容的写法)
var htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
//设置根元素的fontSize的大小,此处的3.2是--设计图的宽度/100
document.documentElement.style.fontSize=htmlWidth/3.2+"px";
// 设置条件屏幕宽度最大值
if(htmlWidth>640){
htmlWidth=640;
document.documentElement.style.fontSize=htmlWidth/3.2+"px";
}
}
//默认调用适配函数
rems();
//window大小变化时调用适配函数
window.onresize=function(){
rems()
}
</script>
扩展:设置自适应变化。为什么是设计稿宽度除以100
思路:自适应时保持1rem = 100px自适应
假设设计稿宽度是640px,此时设置根元素font-size:100px; 即:1rem = 100px; 则:640px为6.4rem,比较好计算。
对于自适应宽度,假设显示器宽度为npx,根元素设置为mpx,按照等比例缩放原则:
npx/640px = mpx/100px;
换算后:m = 100*n/640 = n/6.4,即:根元素m = 显示器宽度/(设计稿宽度/100)